Vuetify <v-menu> 中的自动对焦和键盘导航

Posted 2023-02-16

【中文标题】Vuetify <v-menu> 中的自动对焦和键盘导航

【英文标题】：Auto-focus and keyboard navigation in Vuetify <v-menu>

【发布时间】：2019-06-13 19:55:13

【问题描述】：

是否可以自动对焦并允许通过键盘导航？

我希望能够打开菜单并突出显示第一个项目，然后让用户能够向上/向下滚动菜单选项。

VMenu 支持 Keyable mixin，所以应该支持向上/向下箭头，但我不知道如何让它工作

【参考方案1】：

您可以向 VMenu 组件添加引用 (ref="yourMenu")。之后你可以调用keyable mixin中定义的方法，例如：

const menu = this.$refs.yourMenu
menu.changeListIndex(e)  // e is event that has brought you here
// or...
menu.onKeyDown(e)        // if you don't want to handle keys in different way