插件名称 | vue-select |
---|---|
版本号 | v0.5.2 |
发布时间 | 2020年4月22日 |
插件作者 | desislavsd |
vue-select是Vue.js组件来创建动态的,可定制的,先进的下拉列表中选择就像SELECT2和chosen库。
# NPM
$ npm install @desislavsd/vue-select --save
1.安装并导入。
import '@desislavsd/vue-select/dist/vue-select.css'
import VueSelect from '@desislavsd/vue-select'
2.注册组件。
Vue.use(VueSelect, {
/* 选项 */
})
// 或
export default {
components: { vSelect }
}
3.创建一个vue-select组件并定义选项数据,如下所示:
<v-select v-model="name" :from="['vue', 'script']" />
<v-select v-model="name" as="name" :from="[{name: 'vue', id: 1}, {name: 'script', id: 2}]" tagging :tag-keys="[9, 32, 188]" />
<v-select v-model="name" as="name:id" from="/data?q=%s" />
4.所有可用props。
/**
* 使用 v-model
*/
value: { },
query: String,
/**
* 下拉列表的选项。应该是其中之一:
*
* Array: 选择选项数组
* Function: 返回选项数组或可解析为选项数组的promise的函数
* String: 将传递给fetch函数的Url
* Object: 要传递给获取函数的配置对象。
*/
from: {
type: [ Array, Function, String, Object ],
default(){ return [] }
},
/**
* 格式的选项描述符 'label:value:index'
*
* label:将成为标签的选项属性的路径。它也用于过滤。
* 如果选项是对象,则此字段是必需的。
*
* value: 将用作选项值的选项属性的路径。
* 如果ommited,则使用整个选项。
*
* index: 用于比较的选项的唯一属性的路径。
* 如果ommited返回值。
*/
as: [String, Array],
/**
* 分析服务器的响应。
* 应该返回选项数组。
*/
parse: {
type: [Function, String],
default: me
},
fetch: {
type: Function,
default: async function(q, cfg){
let url = cfg.url || cfg;
return await fetchAdapter(url.replace('%s', encodeURIComponent(q)))
},
},
filter: {
type: [Boolean, Function],
default: undefined
},
filterBy: {
type: Function,
default( { label }, q ){
return ~(label + '').toLowerCase().indexOf(q.toLowerCase())
}
},
/**
* 搜索函数的去噪(毫秒)
*/
debounce: { type: Number, default: 250 },
tagging: { type: [Boolean, Function] },
multiple: { type: Boolean, default: undefined },
dynamic: { type: Boolean, default: undefined },
tags: {}, /* 只读 */
tagKeys: {type: Array, default: () => [] },
validate: {
type: Function,
default(q){
let { $attrs } = this;
return ( q || !$attrs.hasOwnProperty('minlength') ) && elMatches(this.$refs.inp, ':valid')
}
},
watchAttrs: {default(){ return ['required', 'disabled','readonly']}},
5.事件处理程序。
v0.5.2(03/28/2021)
v0.5.1(03/24/2021)