Vue|Vue 自定义下拉选择器（多选、搜索、隐藏更多） Vue自定义下拉选择器：多选、

需求描述：

实现一个element样式的选择器
搜索
单个取消，全部取消
隐藏两个以上的已选并显示...

效果图： 【Vue|Vue 自定义下拉选择器（多选、搜索、隐藏更多）】

文章图片

坑: 一开始使用element的多选选择器，但是element不支持隐藏已选Tag，使用了伪类样式成功实现第4个需求。但是发现搜索根本用不了，被挡住了。最后还是自定义了一个组件。
在交互上，还有很多需要注意的——当点击选择器以外时，需要隐藏选择器；下拉展开时，input需要一直聚焦的。一开始在input中加入blur事件，发现无法满足这两个交互。最后监听点击事件，判断点击的DOM是否在选择器中，以此控制失焦、聚焦和展示、隐藏下拉。
实现：

.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; }