探索 Vue-Multiselect

作者：John Au-Yeung
翻译：疯狂的技术宅

原文：https://blog.logrocket.com/ex...

未经允许严禁转载

创建下拉菜单总是很麻烦的，特别是当我们需要自定义样式时，select 元素的作用非常有限。如果用 Vue 来构建我们的应用，则可以用一些组件来帮助简化工作。

在本文中，我们将研究怎样用 Vue-Multiselect 库来改善下拉菜单的效果。

准备工作

首先，运行以下命令来安装 Vue-Multiselect：

npm install vue-multiselect --save

还可以通过

然后，在我们的组件中，可以编写以下代码：

现在 Multiselect 组件已注册到该组件。我们把带有 v-model 的 multiselect 组件绑定到 value 状态。再把 options 属性设置为 options，这样可以使其具有字符串数组。

这样，显示给用户的值将会与所选值的相同，可以从下拉菜单下方的

标签中得到验证。另外要注意，我们用 style 标签从包中添加了样式。

单选对象

如果我们想要向用户显展示项目，并且这些项目与要显示的值不一样，那么就需要有一组可供选择的对象。

例如：

我们把 label 设置为 name，这样就可以通过 name 属性来显示内容。现在当我们选择一个值时，选择的是整个对象，并且在选择项目时把 value 设置成了所选的对象。

添加搜索

由于 searchable 属性的默认设置为 true，所以可以使用搜索功能。可以用 custom-label 属性显示下拉菜单的自定义文本，我们把属性设置为一个函数。

可以这样写：

现在可以在为每个条目显示的 nameFormatter 中得到返回的内容。

多选

Vue-Multiselect 还支持多种选择。例如：

可以在 multiselect 中添加 multiple 来启用多选。通过填充 selection 插槽来添加在选定内容时要显示文本，如下所示：

selection 插槽有带选定值的 values 属性。 isOpen 用来指示菜单是否打开，search 用来设置搜索词。

允许输入标签

还可以让用户通过 Vue-Multiselect 来添加标签。

可以通过下面的代码让用户添加标签：

我们通过添加 taggable prop 来使用户能够输入自己的标签，并通过 addTag 方法来监听 multiselect 发出的 tag 事件。它使用带有标签名称的 newTag 参数。

在该方法中，我们添加了 this.values 和 this.options，这样可以把新标签添加到选项列表和所选值的列表中。

自定义选项模板

在下拉菜单可以包含文本和图片是 Vue-Multiselect 的一大功能。

可以这样写：

用下拉菜单项的图像和文本填充 singleLabel 插槽。选项插槽的填充方式与填充下拉选项的方式相同。

选项组

我们还可以对选项进行分组，例如：

options 是对象的数组，带有组标签的属性，在我们的例子中为 type。 items 在下拉列表组中具有这些项目。

将 group-values 设置为 items 属性，这样可以将其用作组项目，把 group-label 设置为 type ，可以显示为组标题。把 label 设置为 name 属性，可以将其显示给用户。

Vuex 集成

接下来把 Vue-Multiselect 与 Vuex 集成在一起，这样就可以把选择的结果存在 Vuex 存储而不是组件中。

代码：

main.js
import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    value: "apple",
    options: ["apple", "orange", "grape"]
  },
  mutations: {
    updateValue(state, value) {
      state.value = value;
    }
  },
  actions: {
    updateValueAction({ commit }, value) {
      commit("updateValue", value);
    }
  }
});

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");
App.vue

在 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 和值。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...