Vue.js的动态选择框组件 - vue-dynamic-select

Vue.js的动态选择框组件 - vue-dynamic-select
插件名称 vue-dynamic-select
发布时间 2020年5月5日
插件作者 silasmontgomery

一个VueJS插件,提供了无依赖的可搜索和反应式选择列表组件。

安装和下载:

# NPM
$ npm install vue-dynamic-select --save

导入:

import DynamicSelect from 'vue-dynamic-select'
Vue.use(DynamicSelect)

使用:

// 静态选项源(数组)
<dynamic-select 
    :options="objectArray"
    option-value="id"
    option-text="name"
    placeholder="type to search"
    v-model="selectedObject" />

// 动态选项源(ajax等)
<dynamic-select 
    :options="objectArray"
    @search="onSearchEventHandler"
    option-value="id"
    option-text="name"
    placeholder="type to search"
    v-model="selectedObject" />

Properties:

名称 类型 默认 描述
options Array [ ] 将创建选择列表选项的对象数组
option-value String id 用于选择选项值的对象属性
option-text String name 用于选择选项的显示文本的对象属性
v-model Object null 包含所选对象的对象
placeholder String search 包含要用作占位符的文本的字符串

事件:

名称 描述
search 每当搜索文本更改时触发。值是当前的搜索字符串。
input 每当选择一个选项时触发。