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

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

效果如图:

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

但是键盘按上下移不生效

可能因为我的el-dropdown-item是由数组遍历出来的,文档的菜单是写死的

换成el-popover组件,内部用ul和li实现遍历菜单

后续需要在input框自动聚焦后再触发键盘上下移事件

实现自动聚焦,首先想到的方法是 给el-input 添加ref，获取后调用focus()

但是不生效,

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

还是不生效,

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

完成搜索输入框的自动对焦后添加键盘事件,

添加的键盘事件让用户看到选择的选项样式变化以外,滚轮是不会变动的,

继续提升用户体验感,需要让滚轮随着用户的 *** 作而滑动

按钮防抖是个自古以来的老问题

以下可以解决所有vue的事件绑定防抖,

但是原生事件绑定不行,

点击后移除焦点是解决点击按钮后d窗, 此时按回车或空格会继续触发按钮点击

造成不必要的困扰

温馨提示：

1以上写法，仅仅适应页面上input框位置固定的情况下写的，如果页面上的部分input框存在增删的情况，则可能不适用，需要加以修改

2以上写法是针对vue页面写的，ref属性也是vue里面获取dom元素的方法，如果你们项目不是vue写的，也可设置id属性或者其他的，反正原理就是让dom元素依次往下排，让数组里面的数据和dom元素名称对应起来

很多刚开始使用v-on的键盘事件时，经常会碰到明明添加了@keyup按键名/值，却没有起作用，（小鸡不尿尿，各有各的道），其实不是没有起作用，而是元素没有获取焦点导致的。

比如把 keyup 事件绑定在按钮上面，如果焦点不在按钮上，就无法响应这个事件。点击之后，焦点就在按钮上，所以这时按空格键有效。

思路：

过滤器可以用在两个地方：mustache插值和v-bind表达式；过滤器应该被添加在js表达式的尾部，由“管道符”指示;

语法：

过滤器可多次调用：{{count | myFormat(3,1) | test }}

多个过滤器调用时：先把最原始的值 count 交给第一个过滤器 myFormat 来处理，处理的结果再交给第二个过滤 test 器去处理，直到最后一个过滤器调用完毕，把最终的结果放在{{}}里

全局过滤器：

私有过滤器：

如果出现了同名过滤器，将会依据就近原则调用（私有为准）

113键（F2）按下去的时候执行add方法

但是键盘码不方便记忆，可以自定义：

js里键盘事件对应值： >

以上就是关于Vue element下拉菜单实现键盘事件上下移全部的内容，包括:Vue element下拉菜单实现键盘事件上下移、vue项目全局防抖, 点击后移除按钮焦点、实现键盘左右键切换input框焦点等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！