vue-multiselect Action dispatcher事件分发器

Action dispatcher，主要通过设置reset-after属性为"true"后当value变化后，将会重置Reset this.value, this.search, this.selected 的值，然后你可以通过自己定义的dispatchAction事件进行特殊处理。

完整代码

<template>
 <div style="padding:0px 0px 0px 20px;width:50%">
 <multiselect 
 placeholder="请选中" 
 :options="actions" 
 :searchable="true" 
 :reset-after="true" 
 @input="input"
 @select="dispatchAction">
 </multiselect>
  </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 {
      actions: ['alert', 'console.log', 'scrollTop']
    }
  },
  methods: {
    input(value, id){
     console.log(value)
    },
    dispatchAction (actionName) {
      switch (actionName) {
        case 'alert':
          window.alert('You just dispatched "alert" action!')
          break
        case 'console.log':
          console.log('You just dispatched "console.log" action!')
          break
        case 'scrollTop':
          window.scrollTo(0, 0)
          break
      }
    }
  }
}
</script>