vue实现vxe-pulldown上下键选择功能

<vxe-pulldown v-model="showPull" :disabled="disabled" :transfer="true" size="mini">
  <template #default>
    <vxe-input v-model="targetName" 
               clearable
               size="mini"
               placeholder="可搜索的下拉框"
               :disabled="disabled"
               @keyup="keyupEvent">
      <template #suffix>
        <i class="vxe-icon-search" @click="showSelect"></i>
      </template>
    </vxe-input>
  </template>

  <template #dropdown>
    <div class="my-dropdown" ref="selectContent">
      <div class="list-item" v-for="item in searchList" :key="item.id" @click="handleSelect(item)">
        <span>{{ item.name }}—{{item.value}}</span>
      </div>
    </div>
  </template>
</vxe-pulldown>

<style lang="scss" scoped>
.my-dropdown {
  height: 200px;
  overflow: auto;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
}
.list-item{
  height: 35px;
  line-height: 35px;
  padding: 0 10px;
}
.list-item:hover {
  background-color: #f5f7fa;
}
.active-option{
  background-color: #f5f7fa;
}
</style>

//上下键选择
function navigatorOptions(direction){
  if(direction === 'next'){
    hoverIndex.value++
    if(hoverIndex.value === searchList.value.length){
        hoverIndex.value = 0
    }else{
      //第一项到当前选中项高度大于滚动高度加下拉框高度
      if((hoverIndex.value +1)*35 >= document.querySelector('.my-dropdown').scrollTop + 200){
        document.querySelector('.my-dropdown').scrollTop = (hoverIndex.value+1)*35-200
      }else if(hoverIndex.value === 0){
        document.querySelector('.my-dropdown').scrollTop = 0
      }
    }

  }
  else if(direction === 'prev'){
    hoverIndex.value--
    if(hoverIndex.value <0 ){
      hoverIndex.value = searchList.value.length - 1
    }
    if((hoverIndex.value +1) * 35-35 <= document.querySelector('.my-dropdown').scrollTop){
      document.querySelector('.my-dropdown').scrollTop = (hoverIndex.value+1)*35-35
    }else if(hoverIndex.value === searchList.value.length - 1){
      document.querySelector('.my-dropdown').scrollTop = (hoverIndex.value+1)*35-200
    }
  }

  if((hoverIndex.value + 1)*35>200){
    document.querySelector('.my-dropdown').scrollTop = (hoverIndex.value + 1)*35-200
  }else{
    document.querySelector('.my-dropdown').scrollTop = 0
  }

  let optionItem = proxy.$refs.selectContent.querySelectorAll('.list-item')
  optionItem.forEach((item,index)=>{
    item.classList.remove('active-option')
    if(index === hoverIndex.value){
      item.classList.add('active-option')
    }
  })
  searchList.value.forEach((item,index)=>{
    if(index === hoverIndex.value){
      innerText.value = item
    }
  })
}

//获取下拉框列表
const searchList = ref([])
//是否显示下拉框
const showPull = ref(false)
const hoverIndex = ref(0)
//上下建选中内容
const innerText = ref([])

//输入查询
const keyupEvent = (e) => {
  if(e.$event.keyCode !== 38 && e.$event.keyCode !== 40){
    hoverIndex.value = 0
  }
  //向上
  if(e.$event.keyCode === 38){
    navigatorOptions('prev')
  }
  //向下
  if(e.$event.keyCode === 40){
    navigatorOptions('next')
  }
  //enter键
  if(e.$event.keyCode === 13){
    handleSelect(innerText.value)
  }else{
    showPull.value = true //显示下拉框
    querySearchList(targetName.value)//搜索数据
  }

}

//点击下拉框列表触发
function handleSelect(item) {
  targetName.value = item.value
  showPull.value = false
  emits('commonAutoCompleteSelect', props.param, item.id, item.value, item, props.index)
}