a-input 封装select组件 vue

input 封装select组件 vue

需求：输入框，若输入框空白，聚焦展示所有下拉框，输入模糊匹配展示下拉框，输入完全匹配取消下拉框，若输入框存在值，聚焦不展示下拉框，值不完全匹配下拉框值时，展示下拉框；键盘上下可以选择下拉框值，enter可以确认选择

    <a-input
      ref
      v-model.trim="userName"
      placeholder="用户名"
      autocomplete="off"
      @click.stop.prevent="clickfun"
      @change.stop.prevent="clickfun"
      @keydown.native.up.stop.prevent="keyup"
      @keydown.native.down.stop.prevent="keydown"
      @pressEnter.stop.prevent="press"
    >
      <template slot="prefix">
        <img src="@assets/img/user.png" alt="user" dragstart.prevent />
      </template>
    </a-input>
    
    
 <ul
      v-if="filterUserNameList.length > 0 && showSelect"
      class="ant-select-dropdown"
      ref="selectOption"
    >
      <li
        v-for="(item,index) in filterUserList"
        :key="index"
        :data-index="index"
        @click="clickListItem(item)"
        class="ant-select-dropdown-menu-item"
      >{{ item }}</li>
    </ul>
    
      computed: {
    filterUserNameList() {
      return this.userName
        ? this.selectList.filter(o => {
            let reg = new RegExp(o);
            return (
              o.toLowerCase().indexOf(this.userName) != -1 &&
              !reg.test(this.userName)
            );
          })
        : this.selectList;
    }
  },
  
  methods：{
  keyup() {
      this.curIndex--;
      if (this.curIndex < 0) {
        this.curIndex = this.filterUserNameList.length - 1;
      }
      let menuItems = this.$refs.showSelect.querySelectorAll(
        ".ant-select-dropdown-menu-item"
      );
      menuItems.forEach((item, index) => {
        item.classList.remove("activeIem");
        if (index === this.hoverIndex) item.classList.add(" activeIem");
      });
    },
    keydown() {
      this.curIndex++;
      if (this.curIndex == this.filterUserNameList.length) {
        this.curIndex = 0;
      }
      //同keyup操作
    },
    press() {
      //赋值
             let menuItems = that.$refs.showSelect.querySelectorAl1(
            ".ant-select-dropdown-menu-item"
          );
          this.userName=menuItems[this.curIndex]
          this.showSelect=false
    },
    clickfun() {
      this.showSelect = true;
      if (this.filterUserNameList.length > 0 && this.showSelect) {
        let that = this;
        setTimeout(function() {
          let menuItems = that.$refs.showSelect.querySelectorAl1(
            ".ant-select-dropdown-menu-item"
          );
          item.classList.remove(" activeIem ");
          if (index === this.curIndex) item.classList.add("activeIem ");
        }, 20);
      }
    }
  }