Vue element下拉菜单实现键盘事件上下移
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue element下拉菜单实现键盘事件上下移相关的知识，希望对你有一定的参考价值。
参考技术A 提高用户体验感,输入框自动聚焦并键盘控制下拉菜单的选项上下移效果如图:
初期使用的el-dropdown下拉菜单,组件默认可键盘上下移
但是键盘按上下移不生效.
可能因为我的el-dropdown-item是由数组遍历出来的,文档的菜单是写死的.
换成el-popover组件,内部用ul和li实现遍历菜单.
后续需要在input框自动聚焦后再触发键盘上下移事件.
实现自动聚焦,首先想到的方法是 给el-input 添加ref，获取后调用focus()
但是不生效,
后续查看element官方文档可用popover的show event手动给el-input获取焦点
还是不生效,
对焦需要下拉打开后执行,也就是dom更新后所以添加 this.$nextTick生效
完成搜索输入框的自动对焦后添加键盘事件,
添加的键盘事件让用户看到选择的选项样式变化以外,滚轮是不会变动的,
继续提升用户体验感,需要让滚轮随着用户的操作而滑动
以上是关于Vue element下拉菜单实现键盘事件上下移的主要内容，如果未能解决你的问题，请参考以下文章
用点击事件的方式 实现二级下拉菜单（用javaScript与jquery，vue）
element-ui中el-select与el-tree的结合使用实现下拉菜单