探索 Vue-Multiselect

时间 2020-06-23

标签探索 vue multiselect 繁體版

原文原文链接

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

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

未经容许严禁转载前端

建立下拉菜单老是很麻烦的，特别是当咱们须要自定义样式时，select 元素的做用很是有限。若是用 Vue 来构建咱们的应用，则能够用一些组件来帮助简化工做。vue

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

准备工做

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

npm install vue-multiselect --save

还能够经过 <script> 标签添加库，并添加与包相关联的 CSS：面试

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

而后，在咱们的组件中，能够编写如下代码：vuex

<template>
  <div>
    <multiselect v-model="value" :options="options"></multiselect>
    <p>{{value}}</p>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  components: { Multiselect },
  data() {
    return {
      value: null,
      options: ["foo", "baz", "baz"]
    };
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

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

这样，显示给用户的值将会与所选值的相同，能够从下拉菜单下方的 <p> 标签中获得验证。另外要注意，咱们用 style 标签从包中添加了样式。segmentfault

单选对象

若是咱们想要向用户显展现项目，而且这些项目与要显示的值不同，那么就须要有一组可供选择的对象。

例如：

<template>
  <div>
    <multiselect track-by="name" label="name" v-model="value" :options="options"></multiselect>
    <p>{{value}}</p>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  components: { Multiselect },
  data() {
    return {
      value: null,
      options: [
        { name: "Orange", value: "orange" },
        { name: "Apple", value: "apple" },
        { name: "Grape", value: "grape" }
      ]
    };
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

咱们把 label 设置为 name，这样就能够经过 name 属性来显示内容。如今当咱们选择一个值时，选择的是整个对象，而且在选择项目时把 value 设置成了所选的对象。

添加搜索

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

能够这样写：

<template>
  <div>
    <multiselect
      track-by="name"
      label="name"
      :custom-label="nameFormatter"
      v-model="value"
      :options="options"
    ></multiselect>
    <p>{{value}}</p>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  components: { Multiselect },
  data() {
    return {
      value: null,
      options: [
        { name: "Orange", color: "orange", value: "orange" },
        { name: "Apple", color: "red", value: "apple" },
        { name: "Grape", color: "purple", value: "grape" }
      ]
    };
  },
  methods: {
    nameFormatter({ name, color }) {
      return `${name} - ${color}`;
    }
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

如今能够在为每一个条目显示的 nameFormatter 中获得返回的内容。

多选

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

<template>
  <div>
    <multiselect track-by="name" label="name" v-model="value" :options="options" multiple></multiselect>
    <p>{{value}}</p>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  components: { Multiselect },
  data() {
    return {
      value: null,
      options: [
        { name: "Orange", value: "orange" },
        { name: "Apple", value: "apple" },
        { name: "Grape", value: "grape" }
      ]
    };
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

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

<template>
  <div>
    <multiselect track-by="name" label="name" v-model="value" :options="options" multiple>
      <template slot="selection" slot-scope="{ values, search, isOpen }">
        <span v-if="values.length">{{ values.length }} options selected</span>
      </template>
    </multiselect>
    <p>{{value}}</p>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  components: { Multiselect },
  data() {
    return {
      value: null,
      options: [
        { name: "Orange", value: "orange" },
        { name: "Apple", value: "apple" },
        { name: "Grape", value: "grape" }
      ]
    };
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

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

容许输入标签

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

能够经过下面的代码让用户添加标签：

<template>
  <div>
    <multiselect v-model="values" taggable @tag="addTag" :options="options" multiple></multiselect>
    <p>{{values}}</p>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  components: { Multiselect },
  data() {
    return {
      values: [],
      options: ["orange", "apple", "grape"]
    };
  },
  methods: {
    addTag(newTag) {
      this.options.push(newTag);
      this.values.push(newTag);
    }
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

咱们经过添加 taggable prop 来使用户可以输入本身的标签，并经过 addTag 方法来监听 multiselect 发出的 tag 事件。它使用带有标签名称的 newTag 参数。

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

自定义选项模板

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

能够这样写：

<template>
  <div>
    <multiselect v-model="values" :options="options">
      <template slot="singleLabel" slot-scope="props">
        <img class="option-image" :src="props.option.img">
        <div>
          <span>{{ props.option.title }}</span>
        </div>
      </template>
      <template slot="option" slot-scope="props">
        <img class="option-image" :src="props.option.img">
        <div>
          <span>{{ props.option.title }}</span>
        </div>
      </template>
    </multiselect>
    <p>{{values}}</p>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  components: { Multiselect },
  data() {
    return {
      values: [],
      options: [
        {
          title: "orange",
          img:
            "https://secure.webtoolhub.com/static/resources/icons/set114/5cfa0390.png"
        },
        {
          title: "apple",
          img:
            "https://images.squarespace-cdn.com/content/v1/56ed6e3b1bbee05366b9f7a5/1464743651591-TJG1VO66UK1GI9LJ5WDO/ke17ZwdGBToddI8pDm48kHhlTY0to_qtyxq77jLiHTtZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7T-j82ScS_xjTqFYGqFrT72qZ_E0ELtHpOZiWcSG1QwIMeEVreGuQ8F95X5MZTW1Jw/lodi-apple.png?format=300w"
        },
        {
          title: "grape",
          img:
            "https://icons.iconarchive.com/icons/martin-berube/food/256/grapes-icon.png"
        }
      ]
    };
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style>
.option-image {
  width: 100px;
}
</style>

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

选项组

咱们还能够对选项进行分组，例如：

<template>
  <div>
    <multiselect
      group-values="items"
      group-label="type"
      group-select
      v-model="value"
      :options="options"
      label="name"
    ></multiselect>
    <p>{{value}}</p>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  components: { Multiselect },
  data() {
    return {
      value: undefined,
      options: [
        {
          type: "fruit",
          items: [{ name: "apple" }, { name: "orange" }]
        },
        {
          type: "drink",
          items: [{ name: "beer" }, { name: "wine" }]
        }
      ]
    };
  }
};
</script>

<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 存储而不是组件中。

代码：

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
<template>
  <div>
    <multiselect :value="value" @input="updateValueAction" :options="options"></multiselect>
    <p>{{value}}</p>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";
import Vuex from "vuex";

const { mapActions, mapState } = Vuex;

export default {
  components: {
    Multiselect
  },
  computed: {
    ...mapState(["value", "options"])
  },
  methods: {
    ...mapActions(["updateValueAction"])
  }
};
</script>

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

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

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

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

更多文章...