mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-07 07:12:23 +03:00
Merge branch 'ft/vuepress-no-cli' into release/v3.0
# Conflicts: # src/mixins/typeAheadPointer.js
This commit is contained in:
@@ -0,0 +1,43 @@
|
||||
### Vue Compatibility
|
||||
- `vue ~2.0` use `vue-select ~2.0`
|
||||
- `vue ~1.0` use `vue-select ~1.0`
|
||||
|
||||
## Yarn / NPM
|
||||
Install with yarn:
|
||||
```bash
|
||||
yarn add vue-select
|
||||
```
|
||||
or, using NPM:
|
||||
```
|
||||
npm install vue-select
|
||||
```
|
||||
|
||||
Then, import and register the component:
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import vSelect from 'vue-select'
|
||||
|
||||
Vue.component('v-select', vSelect)
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
Include `vue` & `vue-select.js` - I recommend using [unpkg.com](https://unpkg.com/#/).
|
||||
|
||||
```html
|
||||
<!-- include VueJS first -->
|
||||
<script src="https://unpkg.com/vue@latest"></script>
|
||||
|
||||
<!-- use the latest release -->
|
||||
<script src="https://unpkg.com/vue-select@latest"></script>
|
||||
<!-- or point to a specific release -->
|
||||
<script src="https://unpkg.com/vue-select@1.30"></script>
|
||||
```
|
||||
Then register the component in your javascript:
|
||||
|
||||
```js
|
||||
Vue.component('v-select', VueSelect.VueSelect);
|
||||
```
|
||||
|
||||
<CodePen url="dJjzeP" />
|
||||
@@ -0,0 +1,43 @@
|
||||
## RTL
|
||||
|
||||
vue-select supports RTL using the standard HTML API using the `dir` attribute.
|
||||
|
||||
```html
|
||||
<v-select dir="rtl"></v-select>
|
||||
```
|
||||
|
||||
The `dir` attribute accepts the same values as the [HTML spec](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir): `rtl`,`ltr`, and `auto`.
|
||||
|
||||
## Component Text
|
||||
|
||||
All of the text within the component has been wrapped within [slots](https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots) and can be replaced in your app.
|
||||
|
||||
### Loading Spinner
|
||||
*Slot Definition:*
|
||||
```html
|
||||
<slot name="spinner">
|
||||
<div class="spinner" v-show="mutableLoading">Loading...</div>
|
||||
</slot>
|
||||
```
|
||||
*Implementation:*
|
||||
```html
|
||||
<v-select>
|
||||
<i slot="spinner" class="icon icon-spinner"></i>
|
||||
</v-select>
|
||||
```
|
||||
|
||||
### No Options Text
|
||||
*Slot Definition:*
|
||||
```html
|
||||
<slot name="no-options">Sorry, no matching options.</slot>
|
||||
```
|
||||
*Implementation:*
|
||||
```html
|
||||
<v-select>
|
||||
<div slot="no-options">No Options Here!</div>
|
||||
</v-select>
|
||||
```
|
||||
|
||||
For a full list of component slots, view the [slots API docs](../api/slots.md).
|
||||
|
||||
<CodePen url="oZmLVN" height="450"/>
|
||||
@@ -0,0 +1,58 @@
|
||||
# Dropdown Options
|
||||
|
||||
`vue-select` accepts arrays of strings or objects to use as options through the `options` prop:
|
||||
|
||||
```html
|
||||
<v-select :options="['foo','bar']"></v-select>
|
||||
```
|
||||
|
||||
When provided an array of objects, `vue-select` will display a single value of the object. By default, `vue-select` will look for a key named `label` on the object to use as display text.
|
||||
|
||||
```html
|
||||
<v-select :options="[{label: 'foo', value: 'Foo'}]"></v-select>
|
||||
```
|
||||
|
||||
## Option Labels
|
||||
|
||||
When the `options` array contains objects, `vue-select` looks for the `label` key to display by default. You can set your own label to match your source data using the `label` prop.
|
||||
|
||||
For example, consider an object with `countryCode` and `countryName` properties:
|
||||
|
||||
```json
|
||||
{
|
||||
countryCode: "CA",
|
||||
countryName: "Canada"
|
||||
}
|
||||
```
|
||||
|
||||
If you wanted to display `Canada` in the dropdown, you'd use the `countryName` key:
|
||||
|
||||
```html
|
||||
<v-select label="countryName" :options="countries"></v-select>
|
||||
```
|
||||
|
||||
<CodePen url="aEjLPB" height="450"/>
|
||||
|
||||
|
||||
## Option Object Key
|
||||
|
||||
When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection. You can specify your own `index` prop to return only the value contained in the specific property.
|
||||
|
||||
For example, consider an object with `value` and `label` properties:
|
||||
|
||||
```json
|
||||
{
|
||||
value: "CA",
|
||||
label: "Canada"
|
||||
}
|
||||
```
|
||||
|
||||
If you wanted to return `CA` in the dropdown when `Canada` is selected, you'd use the `index` key:
|
||||
|
||||
```html
|
||||
<v-select index="value" :options="countries"></v-select>
|
||||
```
|
||||
|
||||
## Null / Empty Options
|
||||
|
||||
`vue-select` requires the `option` property to be an `array`. If you are using Vue in development mode, you will get warnings attempting to pass anything other than an `array` to the `options` prop. If you need a `null`/`empty` value, use an empty array `[]`.
|
||||
@@ -0,0 +1,57 @@
|
||||
# Selecting Values
|
||||
|
||||
The most common use case for `vue-select` is to have the chosen value synced with a parent component. `vue-select` takes advantage of the `v-model` syntax to sync values with a parent.
|
||||
|
||||
```html
|
||||
<v-select v-model="selected"></v-select>
|
||||
```
|
||||
|
||||
<CodePen url="Kqxbjw" height="25"/>
|
||||
|
||||
If you don't require the `value` to be synced, you can also pass the prop directly:
|
||||
|
||||
```html
|
||||
<v-select :value="selected"></v-select>
|
||||
```
|
||||
|
||||
This method allows you to pre-select a value(s), without syncing any changes to the parent component. This is also very useful when using a state management tool, like Vuex.
|
||||
|
||||
## Single/Multiple Selection
|
||||
|
||||
By default, `vue-select` supports choosing a single value. If you need multiple values, use the `multiple` prop:
|
||||
|
||||
```html
|
||||
<v-select multiple v-model="selected"></v-select>
|
||||
```
|
||||
|
||||
<CodePen url="opMGro" height="250"/>
|
||||
|
||||
## Tagging
|
||||
|
||||
To allow input that's not present within the options, set the `taggable` prop to true.
|
||||
If you want new tags to be pushed to the options list, set `push-tags` to true.
|
||||
|
||||
```html
|
||||
<v-select taggable></v-select>
|
||||
```
|
||||
|
||||
## Return a Single Key from an Object
|
||||
|
||||
<CodePen url="XVoWxm" height="350"/>
|
||||
|
||||
When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection. You can specify your own `index` prop to return only the value contained in the specific property.
|
||||
|
||||
For example, consider an object with `value` and `label` properties:
|
||||
|
||||
```json
|
||||
{
|
||||
value: "CA",
|
||||
label: "Canada"
|
||||
}
|
||||
```
|
||||
|
||||
If you wanted to return `CA` in the dropdown when `Canada` is selected, you'd use the `index` key:
|
||||
|
||||
```html
|
||||
<v-select index="value" :options="countries"></v-select>
|
||||
```
|
||||
Reference in New Issue
Block a user