关于前端:Vue-自定义下拉选择器多选搜索隐藏更多

需要形容：

1. 实现一个 element 款式的选择器
2. 搜寻
3. 单个勾销，全副勾销
4. 暗藏两个以上的已选并显示 …

效果图：

坑:

一开始应用 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>