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

//上下键选择
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)
}