作者：疯狂的技术宅
转发链接：https://mp.weixin.qq.com/s/NJh8xlBo3ipiuFa-ClQzkQ
前言
创建下拉菜单总是很麻烦的，特别是当我们需要自定义样式时，select 元素的作用非常有限。如果用 Vue 来构建我们的应用，则可以用一些组件来帮助简化工作。
在本文中，我们将研究怎样用 Vue-Multiselect 库来改善下拉菜单的效果。
准备工作
首先，运行以下命令来安装 Vue-Multiselect：
npm install vue-multiselect --save还可以通过
现在 Multiselect 组件已注册到该组件。我们把带有 v-model 的 multiselect组件绑定到 value 状态。再把 options 属性设置为 options，这样可以使其具有字符串数组。
这样，显示给用户的值将会与所选值的相同，可以从下拉菜单下方的
标签中得到验证。另外要注意，我们用 style 标签从包中添加了样式。
单选对象
如果我们想要向用户显展示项目，并且这些项目与要显示的值不一样，那么就需要有一组可供选择的对象。
例如：
{{value}}
我们把 label 设置为 name，这样就可以通过 name 属性来显示内容。现在当我们选择一个值时，选择的是整个对象，并且在选择项目时把 value 设置成了所选的对象。
添加搜索
由于 searchable 属性的默认设置为 true，所以可以使用搜索功能。可以用 custom-label 属性显示下拉菜单的自定义文本，我们把属性设置为一个函数。
可以这样写：
{{value}}
现在可以在为每个条目显示的 nameFormatter 中得到返回的内容。
多选
Vue-Multiselect 还支持多种选择。例如：
{{value}}
可以在 multiselect 中添加 multiple 来启用多选。通过填充 selection 插槽来添加在选定内容时要显示文本，如下所示：
{{ values.length }} options selected {{value}}
selection 插槽有带选定值的 values 属性。isOpen 用来指示菜单是否打开，search 用来设置搜索词。
允许输入标签
还可以让用户通过 Vue-Multiselect 来添加标签。
可以通过下面的代码让用户添加标签：
{{values}}
我们通过添加 taggable prop 来使用户能够输入自己的标签，并通过 addTag 方法来监听 multiselect 发出的 tag 事件。它使用带有标签名称的 newTag 参数。
在该方法中，我们添加了 this.values 和 this.options，这样可以把新标签添加到选项列表和所选值的列表中。
自定义选项模板
在下拉菜单可以包含文本和图片是 Vue-Multiselect 的一大功能。
可以这样写：
![]()
{{ props.option.title }} ![]()
{{ props.option.title }} {{values}}
用下拉菜单项的图像和文本填充 singleLabel 插槽。选项插槽的填充方式与填充下拉选项的方式相同。
选项组
我们还可以对选项进行分组，例如：
{{value}}
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 {{value}}
在 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 和值。
推荐Vue学习资料文章：
《细品30张脑图带你从零开始学Vue》
《Vue后台项目中遇到的技术难点以及解决方案》
《手把手教你Electron + Vue实战教程(三)》
《手把手教你Electron + Vue实战教程(二)》
《手把手教你Electron + Vue实战教程(一)》
《收集22种开源Vue模板和主题框架「干货」》
《如何写出优秀后台管理系统？11个经典模版拿去不谢「干货」》
《手把手教你实现一个Vue自定义指令懒加载》
《基于 Vue 和高德地图实现地图组件「实践」》
《一个由 Vue 作者尤雨溪开发的 web 开发工具—vite》
《是什么让我爱上了Vue.js》
《1.1万字深入细品Vue3.0源码响应式系统笔记「上」》
《1.1万字深入细品Vue3.0源码响应式系统笔记「下」》
《「实践」Vue 数据更新7 种情况汇总及延伸解决总结》
《尤大大细说Vue3 的诞生之路「译」》
《提高10倍打包速度工具Snowpack 2.0正式发布，再也不需要打包器》
《大厂Code Review总结Vue开发规范经验「值得学习」》
《Vue3 插件开发详解尝鲜版「值得收藏」》
《带你五步学会Vue SSR》
《记一次Vue3.0技术干货分享会》
《Vue 3.x 如何有惊无险地快速入门「进阶篇」》
《「干货」微信支付前后端流程整理(Vue+Node)》
《带你了解 vue-next(Vue 3.0)之 炉火纯青「实践」》
《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》
《「干货」Vue+Element前端导入导出Excel》
《「实践」Deno bytes 模块全解析》
《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》
《基于vue + element的后台管理系统解决方案》
《Vue仿蘑菇街商城项目(vue+koa+mongodb)》
《基于 electron-vue 开发的音乐播放器「实践」》
《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》
《基于 Vue 技术栈的微前端方案实践》
《消息队列助你成为高薪 Node.js 工程师》
《Node.js 中的 stream 模块详解》
《「干货」Deno TCP Echo Server 是怎么运行的？》
《「干货」了不起的 Deno 实战教程》
《「干货」通俗易懂的Deno 入门教程》
《Deno 正式发布，彻底弄明白和 node 的区别》
《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》
《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》
《前端网红框架的插件机制全梳理(axios、koa、redux、vuex)》
《深入Vue 必学高阶组件 HOC「进阶篇」》
《深入学习Vue的data、computed、watch来实现最精简响应式系统》
《10个实例小练习，快速入门熟练 Vue3 核心新特性(一)》
《10个实例小练习，快速入门熟练 Vue3 核心新特性(二)》
《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》
《2020前端就业Vue框架篇「实践」》
《详解Vue3中 router 带来了哪些变化？》
《Vue项目部署及性能优化指导篇「实践」》
《Vue高性能渲染大数据Tree组件「实践」》
《尤大大细品VuePress搭建技术网站与个人博客「实践」》
《10个Vue开发技巧「实践」》
《是什么导致尤大大选择放弃Webpack？【vite 原理解析】》
《带你了解 vue-next(Vue 3.0)之 小试牛刀【实践】》
《带你了解 vue-next(Vue 3.0)之 初入茅庐【实践】》
《实践Vue 3.0做JSX(TSX)风格的组件开发》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《手拉手带你开启Vue3世界的鬼斧神工【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《怎样为你的 Vue.js 单页应用提速》
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》
《Vue真是太好了 壹万多字的Vue知识点 超详细!》
《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《Vue3 尝鲜》
《总结Vue组件的通信》
《Vue 开源项目 TOP45》
《2020 年，Vue 受欢迎程度是否会超过 React？》
《尤雨溪：Vue 3.0的设计原则》
《使用vue实现HTML页面生成图片》
《实现全栈收银系统(Node+Vue)(上)》
《实现全栈收银系统(Node+Vue)(下)》
《vue引入原生高德地图》
《Vue合理配置WebSocket并实现群聊》
《多年vue项目实战经验汇总》
《vue之将echart封装为组件》
《基于 Vue 的两层吸顶踩坑总结》
《Vue插件总结【前端开发必备】》
《Vue 开发必须知道的 36 个技巧【近1W字】》
《构建大型 Vue.js 项目的10条建议》
《深入理解vue中的slot与slot-scope》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《使用vue+node搭建前端异常监控系统》
《推荐 8 个漂亮的 vue.js 进度条组件》
《基于Vue实现拖拽升级(九宫格拖拽)》
《手摸手，带你用vue撸后台 系列二(登录权限篇)》
《手摸手，带你用vue撸后台 系列三(实战篇)》
《前端框架用vue还是react？清晰对比两者差异》
《Vue组件间通信几种方式，你用哪种？【实践】》
《浅析 React / Vue 跨端渲染原理与实现》
《10个Vue开发技巧助力成为更好的工程师》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
《1W字长文+多图，带你了解vue的双向数据绑定源码实现》
《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue应用》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》
《Vue3.0权限管理实现流程【实践】》
《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》
作者：疯狂的技术宅
转发链接：https://mp.weixin.qq.com/s/NJh8xlBo3ipiuFa-ClQzkQ
770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
