探索 Vue-Multiselect

疯狂的技术宅

发布于 2020-06-19 11:51:25

3.2K0

发布于 2020-06-19 11:51:25

文章被收录于专栏：京程一灯京程一灯

正文共：3400 字

预计阅读时间：10 分钟

创建下拉菜单总是很麻烦的，特别是当我们需要自定义样式时，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";
10
11export default {
12  components: { Multiselect },
13  data() {
14    return {
15      value: null,
16      options: ["foo", "baz", "baz"]
17    };
18  }
19};
20</script>
21
22<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";
10
11export 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>
25
26<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>
13
14<script>
15import Multiselect from "vue-multiselect";
16
17export 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>
36
37<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";
10
11export 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>
25
26<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>
11
12<script>
13import Multiselect from "vue-multiselect";
14
15export 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>
29
30<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";
10
11export 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>
27
28<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>
20
21<script>
22import Multiselect from "vue-multiselect";
23
24export 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>
50
51<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
52
53<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>
14
15<script>
16import Multiselect from "vue-multiselect";
17
18export 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>
37
38<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});
24
25Vue.config.productionTip = false;
26
27new Vue({
28  store,
29  render: h => h(App)
30}).$mount("#app");
31App.vue
32<template>
33  <div>
34    <multiselect :value="value" @input="updateValueAction" :options="options"></multiselect>
35    <p>{{value}}</p>
36  </div>
37</template>
38
39<script>
40import Multiselect from "vue-multiselect";
41import Vuex from "vuex";
42
43const { mapActions, mapState } = Vuex;
44
45export default {
46  components: {
47    Multiselect
48  },
49  computed: {
50    ...mapState(["value", "options"])
51  },
52  methods: {
53    ...mapActions(["updateValueAction"])
54  }
55};
56</script>
57
58<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 和值。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-06-16，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自前端先锋微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

vue.js

登录后参与评论

0 条评论

热度