为什么这个方法不会被@keyup事件触发？

Question

我正在尝试将文本字段集中在 ALT + C 快捷方式（在我的Electron-Vue应用程序中）：

Codepen： https://codepen.io/anon/pen/aqrBzq?editors=1010

codepen使用this v-text-field自定义组件，而this对Github的评论说，该方法应该包含$nextTick以便集中此组件

需要这个，但不起作用

 <v-text-field
   ref="filter"
   @keyup.alt.67="focusFilter" 
   label="type here" >
 </v-text-field>

 ...

 methods: {
   focusFilter(event){
     this.$nextTick(event.target.focus)
   }
 }

这有效，但不是我需要的：

我也试过下面这段代码，尝试用按钮聚焦，但是它可以工作，但是我希望它能用一个键快捷键（例如 ALT + C < / kbd>但更优选 CTRL + F ，但为了举例我不使用保留的快捷方式）

 <v-btn @click="focusFilter()">focus</v-btn>

 ...

 methods: {
   focusFilter(event){
     this.$nextTick(this.$refs.filter.focus)
   }
 }

Answer 1

当您在组件上侦听本机事件时，您需要使用.native修饰符。

所以请改用：

@keyup.native.alt.67="focusFilter"

详细信息：https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components

如果您想在按下alt+c时关注此输入并且有任何重点，您需要为window的{​​{1}}添加事件处理程序。

我创建了一种方法，可以在适当的情况下将其集中在：

keyup

然后，添加一个创建的钩子，并在methods: { listenForFocusFilterShortcut (event) { if (event.keyCode === 67 && event.altKey) { this.$refs.filter.focus() } }, } 事件发生时将此回调附加到窗口。

keyup

然后，在删除组件时删除事件侦听器：

created () {
  window.addEventListener(
    'keyup',
    this.listenForFocusFilterShortcut
  )
},