Status: WIP
$ npm install vue-next-select
import { reactive, ref, createApp } from 'vue'
import VueSelect from 'vue-next-select'
import 'vue-next-select/dist/index.min.css'
const app = createApp({
setup() {
const value = ref(0)
const options = reactive([0, 1, 2])
return {
value,
options,
}
},
components: {
// Local registration
VueSelect,
},
template: `
<vue-select
v-model="value"
:options="options"
></vue-select
`,
})
// Or global registration
app.component('vue-select', VueSelect)
app.mount(document.querySelector('#app'))
<vue-select v-model="selectedOptions" :options="options" close-on-select></vue-select>
createApp({
setup() {
const selectedOptions = ref('I')
const options = ref(['I', 'Love', 'Vue'])
return {
selectedOptions,
options,
}
},
})
<vue-select v-model="selectedOptions" :options="options" multiple :min="1" :max="2" close-on-select></vue-select>
createApp({
setup() {
const selectedOptions = ref(['I'])
const options = ref(['I', 'Love', 'Vue'])
return {
selectedOptions,
options,
}
},
})
Required | Prop | Type | Default | Arguments | Works if |
---|---|---|---|---|---|
V | v-model / model-value | any | |||
V | options | Array | |||
visible-options | Array | props.options | |||
multiple | Boolean | false | |||
min | Number | 0 | |||
max | Number | Infinity | props.multiple is true | ||
close-on-select | Boolean | false | |||
clear-on-select | Boolean | false | |||
label-by | Function, String | option | option | ||
value-by | Function, String | option | option | ||
track-by | Function, String | option | option | ||
hide-selected | Boolean | false | props.multiple is true | ||
disabled | Boolean | false | |||
loading | Boolean | false | |||
placeholder | String | “Select option” | |||
search-placeholder | String | “Type to search” | |||
searchable | Boolean | false | |||
taggable | Boolean | false | props.multiple is true | ||
collapse-tags | Boolean | false |
Listener | Arguments |
---|---|
@select | option |
@remove | option |
@open | |
@close | |
@search-input | event |
@search-change | event |
@focus | event |
@blur | event |
Name | Arguments |
---|---|
#tag | option |
#dropdown-item | option |
Author: iendeavor
Demo: https://iendeavor.nctu.me/vue-next-select
Source Code: https://github.com/iendeavor/vue-next-select
#vuejs #vue #javascript