需要形容：
- 实现一个element款式的选择器
- 搜寻
- 单个勾销，全副勾销
- 暗藏两个以上的已选并显示...
效果图：
坑:
一开始应用element的多选选择器，然而element不反对暗藏已选Tag，应用了伪类款式胜利实现第4个需要。然而发现搜寻基本用不了，被挡住了。最初还是自定义了一个组件。
在交互上，还有很多须要留神的——当点击选择器以外时，须要暗藏选择器；下拉开展时，input须要始终聚焦的。一开始在input中退出blur事件，发现无奈满足这两个交互。最初监听点击事件，判断点击的DOM是否在选择器中，以此管制失焦、聚焦和展现、暗藏下拉。
实现：
<template> <div> <el-popover trigger="manual" v-model="visible" popper-class="multiple-search-select-popper"> <div class="multiple-search-select el-select" :id="selectId" slot="reference" @click="visible = !visible" > <div class="el-select__tags"> <span> <span v-for="item in selectedList" :key="item.value + 'abc'" class="el-tag el-tag--info el-tag--small el-tag--light" > <span class="el-select__tags-text">{{ item.label }}</span> <i @click="selectItem(item)" class="el-tag__close el-icon-close"></i> </span> </span> </div> <div class="el-input el-input--suffix" :class="{ 'is-focus': selecting }"> <input tabindex="-1" type="text" readonly="readonly" autocomplete="off" :placeholder="selectedList.length == 0 ? '反对含糊搜寻，多选，勾销性能' : ''" class="el-input__inner select-input" :id="selectId + 'Input'" style="height: 40px" /> <span class="el-input__suffix" @mouseover="handleHoverIcon(true)" @mouseleave="handleHoverIcon(false)" ><span class="el-input__suffix-inner" ><i v-show="!showEmptyIcon" :class="{ 'is-reverse': visible, 'el-select__caret el-input__icon el-icon-arrow-up': true, }" ></i> <i v-show="selectedList.length != 0 && showEmptyIcon" @click="empty" class="el-select__caret el-input__icon el-icon-circle-close" ></i></span ></span> </div> </div> <div class="search-ul-wrap"> <div class="el-input el-input--suffix"> <input v-model="searchValue" type="text" autocomplete="off" placeholder="搜寻" class="el-input__inner" /> <i v-show="searchValue !== ''" @click="searchValue = ''" class="el-select__caret el-input__icon el-icon-circle-close close-icon" ></i> </div> <div class="el-scrollbar"> <div class="el-select-dropdown__wrap el-scrollbar__wrap"> <ul class="el-scrollbar__view el-select-dropdown__list"> <!----> <li :class="{ 'el-select-dropdown__item': true, selected: values.indexOf(item.value) != -1, }" v-for="item in optionList" @click="selectItem(item)" :key="item.value + 'abcd'" > <span>{{ item.label }}</span> </li> </ul> </div> </div> </div> </el-popover> </div></template><script>export default { name: 'MultipleSearchSelect', props: { // 已选项，[{label:'',value:''}] selected: { type: Array, default: () => [], }, // 选项，[{label:'',value:''}] options: { type: Array, default: () => [], }, }, data: () => ({ visible: false, //下拉展现暗藏状态 showEmptyIcon: false, //清空抉择图标的展现暗藏状态 selectedList: [], //本组件的已选项 optionList: [], //本组件的选项 searchValue: '', //搜寻文本 values: [], //纯数组:已选 selectId: Math.ceil(Math.random() * 10000), //本组件惟一ID selecting: false, //正在抉择状态 }), watch: { // 监听搜寻，展现符合条件的选项 searchValue(val) { let arr = [] this.options.map((item) => { if (item.label.indexOf(val) != -1 || val == '') { arr.push(item) } }) this.optionList = arr }, // 依据已选，筛选纯数组 selectedList(val) { this.values = val.map((item) => { return item.value }) }, }, mounted() { const t = this // props给data this.selectedList = this.selected this.optionList = this.options // 内部点击事件 const dropdown = document.getElementById(this.selectId) document.addEventListener('click', function (event) { var target = event.target if (!dropdown || !dropdown.childNodes) return if (target === dropdown.children || dropdown.contains(target)) { return } t.visible = false document.getElementById(t.selectId + 'Input').blur() t.selecting = false }) //下拉器宽度 console.log(document.getElementById(t.selectId + 'Input').offsetWidth) }, methods: { handleHoverIcon(sign) { this.showEmptyIcon = sign ? this.selectedList.length != 0 : sign if (!this.visible) { document.getElementById(this.selectId + 'Input').blur() this.selecting = false } }, //全副清空 empty() { this.selectedList = [] }, // 选单个 selectItem(selectedItem) { document.getElementById(this.selectId + 'Input').focus() this.selecting = true // 扭转已选数组 if (this.values.indexOf(selectedItem.value) === -1) { this.selectedList.push(selectedItem) } else { this.selectedList.splice(this.values.indexOf(selectedItem.value), 1) } //如果是搜寻后点击，则触发清空搜索，节俭用户操作（参照element的交互） if (this.searchValue != '') this.searchValue = '' }, },}</script><style scoped lang="less">.multiple-search-select { .el-select__tags { flex-wrap: nowrap; } .el-input__inner { padding-right: 5px; cursor: pointer; .el-select__caret { float: right; color: #c0c4cc; font-size: 14px; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; -webkit-transform: rotateZ(180deg); -ms-transform: rotate(180deg); transform: rotateZ(180deg); cursor: pointer; } } .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { background-color: #f5f7fa; color: #606266; }}.search-ul-wrap { .el-input__inner { margin-left: 8px; margin-right: 8px; width: 94%; }}.selected { color: #409eff; &:after { position: absolute; right: 20px; font-family: element-icons; content: '\E6DA'; font-size: 12px; font-weight: 700; -webkit-font-smoothing: antialiased; }}.el-tag.el-tag--info { margin-right: 2px; float: left;}.close-icon { position: absolute; right: 10px; top: 0; color: #c0c4cc; cursor: pointer;}// 暗藏两个之后的所有Tag，并在第三个Tag之前展现.../deep/ .el-tag.el-tag--info:nth-child(n + 3) { width: 0; padding: 0; height: 0; margin: 0; color: rgba(255, 255, 255, 0); border-color: unset; background: none; i { display: none; }}/deep/ .el-tag.el-tag--info:nth-child(3) { position: relative; &:before { content: '...'; position: absolute; left: 4px; top: -12px; width: 26px; height: 24px; padding: 0 8px; line-height: 22px; font-size: 12px; background-color: #f4f4f5; color: #909399; box-sizing: border-box; border: 1px solid #e9e9eb; border-radius: 4px; }}&::-webkit-scrollbar-track-piece { background: unset;}&::-webkit-scrollbar { width: 6px; height: 6px;}&::-webkit-scrollbar-thumb { transition: 0.3s background-color; background-color: rgba(144, 147, 153, 0.3); border-radius: 20px; width: 6px; height: 6px;}</style>