vue-multiselect事件列表,Input、Select、Remove、SearchChange、Tag、Open、Close事件。
事件名称 | 参数 | 描述 |
---|---|---|
Input | (value, id) | 选中后this.value的事件 |
Select | (selectedOption, id) | 选中下拉项后的事件 |
Remove | (removedOption, id) | 移除选中项的事件 |
SearchChange | (searchQuery, id) | 输入关键词变化后的事件 |
Tag | (searchQuery, id) | 标签模式下添加新的标签(选项)事件 |
Open | (id) | 展开下拉选项事件 |
Close | (value, id) | 关闭下拉选项事件 |
代码例子
<template>
<div style="width:50%;padding:10px">
<multiselect
v-model="value"
deselect-label="已选中"
track-by="name"
label="name"
placeholder="请选择"
:options="options"
:searchable="true"
:close-on-select="false"
:multiple="true"
selectLabel="回车选择"
selectGroupLabel="回车选择整个分组"
selectedLabel="已选择"
deselectLabel="回车取消选择"
deselectGroupLabel="回车取消选择"
tag-placeholder="添加标签到下拉项"
:taggable="true"
@input="input"
@select="select"
@remove="remove"
@search-change="searchChange"
@tag="tag"
@open="open"
@close="close"
>
<template slot="singleLabel" slot-scope="{ option }">
<strong>{{ option.name }}</strong> 由<strong>
{{ option.language }}开发的</strong>
</template>
</multiselect>
<pre ><code>{{ value }}</code></pre>
</div>
</template>
<script>
import Vue from 'vue'
//导入Multiselect
import Multiselect from 'vue-multiselect';
import 'vue-multiselect/dist/vue-multiselect.min.css';
//注册multiselect组件
Vue.component('multiselect', Multiselect)
export default {
components: {
Multiselect
},
data () {
return {
value: null,
options: [
{ name: 'Vue.js', language: 'JavaScript' },
{ name: 'Rails', language: 'Ruby' },
{ name: 'www.taobao.com', language: 'java', $isDisabled: true },
{ name: 'www.itxst.com', language: 'C#' }
]
}
},
methods: {
input(value, id){
console.log(value)
},
//选择事件
select(selectedOption, id){
console.log(selectedOption)
},
//移除事件
remove(removedOption, id){
console.log(removedOption)
},
//搜索事件
searchChange(searchQuery, id){
console.log('搜索事件')
console.log(searchQuery)
},
//新增标签事件
tag(searchQuery, id){
console.log('tag事件')
console.log(searchQuery)
const tag = {
name: searchQuery,
language: 'itxst.com'+ Math.floor((Math.random() * 10000000))
}
this.options.push(tag)
if(this.value) this.value=[];
this.value.push(tag)
},
//展开事件
open(id){
console.log('open展开事件')
},
//展开事件
close(value,id){
console.log('close关闭事件')
}
}
}
</script>
例子