疯狂的技术宅 前端先锋
创建下拉菜单总是很麻烦的，特别是当我们需要自定义样式时，select 元素的作用非常有限。如果用 Vue 来构建我们的应用，则可以用一些组件来帮助简化工作。
在本文中，我们将研究怎样用 Vue-Multiselect 库来改善下拉菜单的效果。
准备工作首先，运行以下命令来安装 Vue-Multiselect：
1npm install vue-multiselect --save还可以通过 <script> 标签添加库，并添加与包相关联的 CSS：
1<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>2<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">然后，在我们的组件中，可以编写以下代码：
1<template> 2 <div> 3 <multiselect v-model="value" :options="options"></multiselect> 4 <p>{{value}}</p> 5 </div> 6</template> 7 8<script> 9import Multiselect from "vue-multiselect";1011export default {12 components: { Multiselect },13 data() {14 return {15 value: null,16 options: ["foo", "baz", "baz"]17 };18 }19};20</script>2122<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>现在 Multiselect 组件已注册到该组件。我们把带有 v-model 的 multiselect 组件绑定到 value 状态。再把 options 属性设置为 options，这样可以使其具有字符串数组。
这样，显示给用户的值将会与所选值的相同，可以从下拉菜单下方的 <p> 标签中得到验证。另外要注意，我们用 style 标签从包中添加了样式。
单选对象如果我们想要向用户显展示项目，并且这些项目与要显示的值不一样，那么就需要有一组可供选择的对象。
例如：
1<template> 2 <div> 3 <multiselect track-by="name" label="name" v-model="value" :options="options"></multiselect> 4 <p>{{value}}</p> 5 </div> 6</template> 7 8<script> 9import Multiselect from "vue-multiselect";1011export default {12 components: { Multiselect },13 data() {14 return {15 value: null,16 options: [17 { name: "Orange", value: "orange" },18 { name: "Apple", value: "apple" },19 { name: "Grape", value: "grape" }20 ]21 };22 }23};24</script>2526<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>我们把 label 设置为 name，这样就可以通过 name 属性来显示内容。现在当我们选择一个值时，选择的是整个对象，并且在选择项目时把 value 设置成了所选的对象。
添加搜索由于 searchable 属性的默认设置为 true，所以可以使用搜索功能。可以用 custom-label 属性显示下拉菜单的自定义文本，我们把属性设置为一个函数。
可以这样写：
1<template> 2 <div> 3 <multiselect 4 track-by="name" 5 label="name" 6 :custom-label="nameFormatter" 7 v-model="value" 8 :options="options" 9 ></multiselect>10 <p>{{value}}</p>11 </div>12</template>1314<script>15import Multiselect from "vue-multiselect";1617export default {18 components: { Multiselect },19 data() {20 return {21 value: null,22 options: [23 { name: "Orange", color: "orange", value: "orange" },24 { name: "Apple", color: "red", value: "apple" },25 { name: "Grape", color: "purple", value: "grape" }26 ]27 };28 },29 methods: {30 nameFormatter({ name, color }) {31 return `${name} - ${color}`;32 }33 }34};35</script>3637<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>现在可以在为每个条目显示的 nameFormatter 中得到返回的内容。
多选Vue-Multiselect 还支持多种选择。例如：
1<template> 2 <div> 3 <multiselect track-by="name" label="name" v-model="value" :options="options" multiple></multiselect> 4 <p>{{value}}</p> 5 </div> 6</template> 7 8<script> 9import Multiselect from "vue-multiselect";1011export default {12 components: { Multiselect },13 data() {14 return {15 value: null,16 options: [17 { name: "Orange", value: "orange" },18 { name: "Apple", value: "apple" },19 { name: "Grape", value: "grape" }20 ]21 };22 }23};24</script>2526<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>可以在 multiselect 中添加 multiple 来启用多选。通过填充 selection 插槽来添加在选定内容时要显示文本，如下所示：
1<template> 2 <div> 3 <multiselect track-by="name" label="name" v-model="value" :options="options" multiple> 4 <template slot="selection" slot-scope="{ values, search, isOpen }"> 5 <span v-if="values.length">{{ values.length }} options selected</span> 6 </template> 7 </multiselect> 8 <p>{{value}}</p> 9 </div>10</template>1112<script>13import Multiselect from "vue-multiselect";1415export default {16 components: { Multiselect },17 data() {18 return {19 value: null,20 options: [21 { name: "Orange", value: "orange" },22 { name: "Apple", value: "apple" },23 { name: "Grape", value: "grape" }24 ]25 };26 }27};28</script>2930<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>selection 插槽有带选定值的 values 属性。isOpen 用来指示菜单是否打开，search 用来设置搜索词。
允许输入标签还可以让用户通过 Vue-Multiselect 来添加标签。
可以通过下面的代码让用户添加标签：
1<template> 2 <div> 3 <multiselect v-model="values" taggable @tag="addTag" :options="options" multiple></multiselect> 4 <p>{{values}}</p> 5 </div> 6</template> 7 8<script> 9import Multiselect from "vue-multiselect";1011export default {12 components: { Multiselect },13 data() {14 return {15 values: [],16 options: ["orange", "apple", "grape"]17 };18 },19 methods: {20 addTag(newTag) {21 this.options.push(newTag);22 this.values.push(newTag);23 }24 }25};26</script>2728<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>我们通过添加 taggable prop 来使用户能够输入自己的标签，并通过 addTag 方法来监听 multiselect 发出的 tag 事件。它使用带有标签名称的 newTag 参数。
在该方法中，我们添加了 this.values 和 this.options，这样可以把新标签添加到选项列表和所选值的列表中。
自定义选项模板在下拉菜单可以包含文本和图片是 Vue-Multiselect 的一大功能。
可以这样写：
1<template> 2 <div> 3 <multiselect v-model="values" :options="options"> 4 <template slot="singleLabel" slot-scope="props"> 5 <img class="option-image" :src="props.option.img"> 6 <div> 7 <span>{{ props.option.title }}</span> 8 </div> 9 </template>10 <template slot="option" slot-scope="props">11 <img class="option-image" :src="props.option.img">12 <div>13 <span>{{ props.option.title }}</span>14 </div>15 </template>16 </multiselect>17 <p>{{values}}</p>18 </div>19</template>2021<script>22import Multiselect from "vue-multiselect";2324export default {25 components: { Multiselect },26 data() {27 return {28 values: [],29 options: [30 {31 title: "orange",32 img:33 "https://secure.webtoolhub.com/static/resources/icons/set114/5cfa0390.png"34 },35 {36 title: "apple",37 img:38 "https://images.squarespace-cdn.com/content/v1/56ed6e3b1bbee05366b9f7a5/1464743651591-TJG1VO66UK1GI9LJ5WDO/ke17ZwdGBToddI8pDm48kHhlTY0to_qtyxq77jLiHTtZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7T-j82ScS_xjTqFYGqFrT72qZ_E0ELtHpOZiWcSG1QwIMeEVreGuQ8F95X5MZTW1Jw/lodi-apple.png?format=300w"39 },40 {41 title: "grape",42 img:43 "https://icons.iconarchive.com/icons/martin-berube/food/256/grapes-icon.png"44 }45 ]46 };47 }48};49</script>5051<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>5253<style>54.option-image {55 width: 100px;56}57</style>用下拉菜单项的图像和文本填充 singleLabel 插槽。选项插槽的填充方式与填充下拉选项的方式相同。
选项组我们还可以对选项进行分组，例如：
1<template> 2 <div> 3 <multiselect 4 group-values="items" 5 group-label="type" 6 group-select 7 v-model="value" 8 :options="options" 9 label="name"10 ></multiselect>11 <p>{{value}}</p>12 </div>13</template>1415<script>16import Multiselect from "vue-multiselect";1718export default {19 components: { Multiselect },20 data() {21 return {22 value: undefined,23 options: [24 {25 type: "fruit",26 items: [{ name: "apple" }, { name: "orange" }]27 },28 {29 type: "drink",30 items: [{ name: "beer" }, { name: "wine" }]31 }32 ]33 };34 }35};36</script>3738<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>options 是对象的数组，带有组标签的属性，在我们的例子中为 type。items 在下拉列表组中具有这些项目。
将 group-values 设置为 items 属性，这样可以将其用作组项目，把 group-label 设置为 type ，可以显示为组标题。把 label 设置为 name 属性，可以将其显示给用户。
Vuex 集成接下来把 Vue-Multiselect 与 Vuex 集成在一起，这样就可以把选择的结果存在 Vuex 存储而不是组件中。
代码：
1main.js 2import Vue from "vue"; 3import App from "./App.vue"; 4import Vuex from "vuex"; 5 6Vue.use(Vuex); 7 8const store = new Vuex.Store({ 9 state: {10 value: "apple",11 options: ["apple", "orange", "grape"]12 },13 mutations: {14 updateValue(state, value) {15 state.value = value;16 }17 },18 actions: {19 updateValueAction({ commit }, value) {20 commit("updateValue", value);21 }22 }23});2425Vue.config.productionTip = false;2627new Vue({28 store,29 render: h => h(App)30}).$mount("#app");31App.vue32<template>33 <div>34 <multiselect :value="value" @input="updateValueAction" :options="options"></multiselect>35 <p>{{value}}</p>36 </div>37</template>3839<script>40import Multiselect from "vue-multiselect";41import Vuex from "vuex";4243const { mapActions, mapState } = Vuex;4445export default {46 components: {47 Multiselect48 },49 computed: {50 ...mapState(["value", "options"])51 },52 methods: {53 ...mapActions(["updateValueAction"])54 }55};56</script>5758<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>在 main.js 中，我们用 Vuex.Store 构造函数来创建带有 value 和 options 状态的 store。我们有一个更新值的 mutation，updateValueAction 用于更新值的状态，然后将 store 存储在传给 Vue 构造函数的对象中。
在 App.vue 中，我们没有把下拉菜单中选择的值与 v-model 绑定在一起，而是通过 mapState 映射状态从 store 中获取状态。通过 mapActions 映射 store 中的 updateValueAction 来更新值。
我们通过侦听 input 事件来获取项目，并调用 updateValueAction 以通过变异在 Vuex store 中更新 value 状态。另外，我们从 store 中设置 value 属性的值。input 事件和 value 代替了 v-model.。
还可以通过 mapState 方法从 Vuex 存储的 options 状态中设置 options。
总结Vue-Multiselect 是一个非常灵活的下拉菜单组件，能让我们创建包含图片和有格式化内容的菜单项的下拉菜单。
还可以对下拉选项进行分组，并启用多个 selection 和 tag。它能够与 Vuex 集成在一起，使我们能够从 store 获取并设置 options 和值。