基于Material实现下拉框多选并且可点击“x”删除（Chips）

需求
实现
写在最后

需求

近期在使用Material搭建一个后台系统，遇到一个如下需求：

功能需求如下：输入框获取焦点时弹出下拉框，下拉框同时支持多选，选中的值会以Material提供的chips的形式显示在输入框的前部，同时chips要支持可点击“x”删除，其实这个需求还是蛮常见的，就是一个支持模糊搜索的多选下拉框，但是我找遍了Material的官方文档也没找到这个功能的api或代码段，官方文档倒是有chips但是不支持下拉框，有下拉框但是不支持多选，有多选但是又不支持chips，只好自己手动把这三个功能实现在一起了。

实现

查看Material的官方文档很快就可以找到这样一个代码段：chips

功能与我们想要实现的需求有部分类似，于是我就想以这个官方功能为基础进行扩展，还需要扩展的功能如下：弹出下拉框，支持多选并赋值，同时失去焦点隐藏下拉框，话不多说，Show me the code：

<template><div class=""><div class="closeArea"v-show="showCustomInput"@click="showCustomInput = false"></div><div class="CustomInput"><div class="md-field md-theme-default":class="{'md-focused':isFocus,'md-has-value':chipsArr.length!=0}"><label for="md-input-34pnj2lffo">成员</label><div class="chipsIn"><md-chipv-for="item in chipsArr"md-deletable @md-delete="testCons">{{item.name}}</md-chip><input@focus="inputFocusAction"@blur="inputBlurAction"type="text" id="md-input-34pnj2lffo" class="md-input"></div><!--<i class="md-icon md-icon-font cur md-theme-default">--><!--<i class="fa fa-sort-amount-desc filter_icon"></i>--><!--</i>--></div><div class="drop_down_area" v-show="showCustomInput"><ul><li v-for="item in chipsArr"@click="addArr(item)">{{item.name}}</li></ul></div></div></div>
</template><script>import {mapGetters} from 'vuex'export default {data() {return {isFocus: false,showCustomInput: false,chipsArr: [{index: 0,name: "Deletable0"}, {index: 1,name: "Deletable1"}, {index: 2,name: "Deletable2"}, {index: 0,name: "Deletable0"}, {index: 1,name: "Deletable1"}, {index: 2,name: "Deletable2"},],}},computed: {...mapGetters(['',])},created() {},methods: {testCons() {this.chipsArr.splice(0,1)},addArr(item){this.chipsArr.push(item)},inputFocusAction(){this.isFocus = true;this.showCustomInput = true;},inputBlurAction(){this.isFocus = false;},}}
</script><style lang="scss" scoped>.closeArea{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}//自定义复选下拉框样式.CustomInput {position: relative;.md-chip {float: left;height: 24px;line-height: 24px;margin: 4px 4px 0 0;}.md-field {display: block;}.chipsIn {max-height: 300px;overflow-y: scroll;}.md-input {width: 130px;}.drop_down_area::-webkit-scrollbar{width: 0;}.drop_down_area {width: 100%;height: 200px;background-color: #fff;position: absolute;left: 0;top: 100%;overflow-y: scroll;border: 1px solid #E7E7E7;z-index: 7;ul {li {width: 100%;height: 32px;line-height: 32px;padding-left: 20px;cursor: pointer;transition: .3s cubic-bezier(.25, .8, .25, 1);&:hover {background-color: #D5E3F6;}}}}}
</style>

其实实现起来还是蛮简单的，主要是Material竟然不提供这个功能着实很让人无助，（其实还有很多大众需求都不怎么支持，我将在后续文档继续介绍，不过也不能怪Material，毕竟这是一款移动端插件，而且受众国内开发者确实不多。）

写在最后

希望这篇文档能给您带来帮助，感谢阅读。