探索 Vue-Multiselect
创建下拉菜单总是很麻烦的,特别是当我们需要自定义样式时,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"
},
{
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 和值。
前端圈刷题神器:前端面试星球

- 来源:疯狂的技术宅
- 原文链接:http://blog.yidengxuetang.com/post/202006/16/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。