Vue element下拉菜单实现键盘事件上下移

需求

提高用户体验感,输入框自动聚焦并键盘控制下拉菜单的选项上下移
效果如图:

初期使用的el-dropdown下拉菜单,组件默认可键盘上下移

            
                
                

                  
                    {{ i < 9 ? `0${i + 1}` : i + 1 }}. {{ s.name }}
                  
                
              
  

但是键盘按上下移不生效.
可能因为我的el-dropdown-item是由数组遍历出来的,文档的菜单是写死的.
换成el-popover组件,内部用ul和li实现遍历菜单.

 
 
    

      

      {{ i < 9 ? `0${i + 1}` : i + 1 }}. {{ s.name }}
      
    
  

后续需要在input框自动聚焦后再触发键盘上下移事件.
实现自动聚焦,首先想到的方法是 给el-input 添加ref，获取后调用focus()

this.$refs.sInput.focus()

但是不生效,
后续查看element官方文档可用popover的show event手动给el-input获取焦点

methods: {
      onShow () {
        this.$refs.sInput.focus()
      }
}

还是不生效,
对焦需要下拉打开后执行,也就是dom更新后所以添加 this.$nextTick生效

methods: {
      onShow () {
          this.$nextTick(() => {
              this.$refs.sInput.focus()
           });
      }
}

完成搜索输入框的自动对焦后添加键盘事件,
添加的键盘事件让用户看到选择的选项样式变化以外,滚轮是不会变动的,
继续提升用户体验感,需要让滚轮随着用户的操作而滑动

methods: {
    _handleUp(){
            //  实现对样式的替换
            this.selectIndex = this.selectIndex === 0 ? this.authoritysList.length - 1 : this.selectIndex - 1;

            let selectNum = this.selectIndex + 1;
            let schoolMenuList = document.getElementById("school-menu-list");
            let intervalTop = schoolMenuList.scrollTop;

            //  实现在用户操作是,滚轮随着上下移的动
            if (selectNum * 35 <= intervalTop){

                schoolMenuList.scrollTop = (selectNum - 1) * 35;

            } else if (selectNum * 35 <= intervalTop + schoolMenuList.offsetHeight){

                schoolMenuList.scrollTop = intervalTop;

            } else if (selectNum * 35 > intervalTop){

                schoolMenuList.scrollTop = selectNum * 35;
            }

        },
    _handleDown(){
            this.selectIndex = this.selectIndex < this.authoritysList.length - 1 ? this.selectIndex + 1 : 0;

            let selectNum = this.selectIndex + 1;
            let schoolMenuList = document.getElementById("school-menu-list");
            let intervalTop = schoolMenuList.scrollTop;

            if (selectNum * 35 <= intervalTop){

                schoolMenuList.scrollTop = (selectNum - 1) * 35;

            } else if (selectNum * 35 <= intervalTop + schoolMenuList.offsetHeight){

                schoolMenuList.scrollTop = intervalTop;

            } else if (selectNum * 35 > intervalTop){

                schoolMenuList.scrollTop = selectNum * 35 - schoolMenuList.offsetHeight;
            }

        }
}