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生效

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

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

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

是winform程序吧？？

如果是按如下步骤 *** 作：

1.先将Form的KeyPreview属性改为：True！

2.为Form添加一个KeyDown事件！如下代码：

private void Form1_KeyDown(object sender, KeyEventArgs e)

{

//textBox1是用来显示.keyDown是自己写的函数!

textBox1.Text += keyDown(e.KeyValue)

}

//注:Form1_KeyDown事件是工具生成!

3.写一个keyDown函数,代码如下:

private string keyDown(int keyValue)

{

switch (keyValue)

{

case 96:

return "0"

break

case 97:

return "1"

break

case 98:

return "2"

break

.............

case 105:

return "9"

break

}

return ""

}

这样就可以了!

如果是ASP.NET的话再说!

---