创建下拉菜单总是很麻烦的,特别是当我们需要自定义样式时,select
元素的作用非常有限。如果用 Vue 来构建我们的应用,则可以用一些组件来帮助简化工作。
在本文中,我们将研究怎样用 Vue-Multiselect 库来改善下拉菜单的效果。
准备工作
首先,运行以下命令来安装 Vue-Multiselect:
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">
然后,在我们的组件中,可以编写以下代码:
<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
,这样可以使其具有字符串数组。
这样,显示给用户的值将会与所选值的相同,可以从下拉菜单下方的 <p>
标签中得到验证。另外要注意,我们用 style
标签从包中添加了样式。
单选对象
如果我们想要向用户显展示项目,并且这些项目与要显示的值不一样,那么就需要有一组可供选择的对象。
例如:
<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-600" }, { title: "apple", img: "https://images.squarespace-cdn.com/content/v1/56ed6e3b1bbee05366b9f7a5/1464743651591-TJG1VO66UK1GI9LJ5WDO/ke17ZwdGBToddI8pDm48kHhlTY0to_qtyxq77jLiHTtZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7T-j82ScS_xjTqFYGqFrT72qZ_E0ELtHpOZiWcSG1QwIMeEVreGuQ8F95X5MZTW1Jw/lodi-apple.png-600?format=300w" }, { title: "grape", img: "https://icons.iconarchive.com/icons/martin-berube/food/256/grapes-icon.png-600" } ] }; } }; </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 和值。
本文转载自:https://segmentfault.com/a/1190000022992889
更多web开发知识,请查阅 HTML中文网 !!
以上就是怎样用 Vue-Multiselect 库来改善下拉菜单的效果?的详细内容,更多请关注0133技术站其它相关文章!