vue-multiselect | 一款基于vuejs强大的下拉框组件

vue-multiselect是一款基于vuejs强大的下拉框组件。该下拉框组件支持单选和多选，支持选项搜索，支持异步获取选项等，功能十分强大。

vue-multiselect支持vue2.x和vue3.x，它的特点有：

• 不依赖于其他JavaScript库或框架。
• 允许用户从一组选项中选择一个选项。
• 允许用户从一组选项中选择多个选项。
• 允许用户输入自定义标签作为选项。
• 使用下拉菜单显示选项。
• 允许用户根据输入内容过滤选项。
• 提供搜索功能，并根据输入内容提供建议。
• 逻辑被拆分成多个可重用的代码块。
• 提供基本的组件，并支持自定义组件。
• 支持使用v-model指令进行双向数据绑定。
• 支持使用Vuex进行状态管理。
• 支持异步加载选项。
• 测试覆盖率超过95％。
• 可以通过一系列属性进行完全配置。

使用方法

安装

如果您想使用vue-multiselect下拉框组件，首先您需要安装它，命令如下：

npm install vue-multiselect
		

使用

在vue组件中使用：

<!-- Vue component -->
<template>
  <div>
    <multiselect v-model="value" :options="options"></multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'

  // register globally
  Vue.component('multiselect', Multiselect)

  export default {
    // OR register locally
    components: { Multiselect },
    data () {
      return {
        value: null,
        options: ['list', 'of', 'options']
      }
    }
  }
</script>

<!-- New step!
     Add Multiselect CSS. Can be added as a static asset or inside a component. -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style>
  your styles
</style>
		

通过CDN引用

<script src="https://unpkg.com/vue-multiselect@2.1.6"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.6/dist/vue-multiselect.min.css">

// register globally
Vue.component('vue-multiselect', window.VueMultiselect.default)			
		

使用示例

单选下拉框

multiselect(
  :value="value",
  :options="source",
  :searchable="false",
  :close-on-select="false",
  :allow-empty="false",
  @input="updateSelected",
  label="name",
  placeholder="Select one",
  track-by="name"
)			
		

带搜索的单选下拉框

multiselect(
  v-model="value",
  :options="source",
  :close-on-select="true",
  :clear-on-select="false",
  placeholder="Select one",
  label="name",
  track-by="name"
)			
		

带搜索的多选下拉框

multiselect(
  v-model="multiValue",
  :options="source",
  :multiple="true",
  :close-on-select="true",
  placeholder="Pick some",
  label="name",
  track-by="name"
)			
		

带tag标签的多选下拉框

multiselect(
  v-model="taggingSelected",
  :options="taggingOptions",
  :multiple="true",
  :taggable="true",
  @tag="addTag",
  tag-placeholder="Add this as new tag",
  placeholder="Type to search or add tag",
  label="name",
  track-by="code"
)


addTag (newTag) {
  const tag = {
    name: newTag,
    code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
  }
  this.taggingOptions.push(tag)
  this.taggingSelected.push(tag)
},			
		

异步下拉框

multiselect(
  v-model="selectedCountries",
  :options="countries",
  :multiple="multiple",
  :searchable="searchable",
  @search-change="asyncFind",
  placeholder="Type to search",
  label="name"
  track-by="code"
)
  span(slot="noResult").
    Oops! No elements found. Consider changing the search query.

methods: {
  asyncFind (query) {
    this.countries = findService(query)
  }
}			
		

详细的配置参数和事件方法，请参考https://vue-multiselect.js.org/

github网址：https://github.com/shentao/vue-multiselect