vue-multiselect事件列表

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>

例子