vue-select是Vue.js组件来创建动态的，可定制的，先进的下拉列表中选择就像SELECT2和chosen库。

安装和下载：

# NPM
$ npm install @desislavsd/vue-select --save

主要特点：

• • 支持单项和多项选择。
  • AJAX数据获取。
  • 数据过滤。

使用：

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.事件处理程序。

• @select：选择一个选项时
• @create：尝试标记时创建新选项时
• @input：更新模型值时
• @focus：专注
• @blur：模糊

变更日志：

v0.5.2（03/28/2021）

• 错误修正

v0.5.1（03/24/2021）

• 错误修正

---

官网：https://desislavsd.gitbook.io/vue-select/

演示：https://www.vue365.cn/code_demo.php?id=280

GitHub下载：https://github.com/desislavsd/vue-select/archive/master.zip