为什么这个方法不是由@keyup 事件触发的？

Question

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

---

代码笔： https ://codepen.io/anon/pen/aqrBzq ? editors = 1010

codepen 使用了这个 v-text-field自定义组件，正如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但更优选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按下时聚焦此输入并且聚焦任何内容，则需要将事件处理程序添加到windowfor keyup。

我已经创建了一种方法来在正确的情况下关注它，例如：

methods: {
  listenForFocusFilterShortcut (event) {
    if (event.keyCode === 67 && event.altKey) {
      this.$refs.filter.focus()
    }
  },
}

然后，添加一个创建的钩子，并在有keyup事件时将此回调附加到窗口。

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

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

destroyed () {
  window.removeEventListener(
    'keyup',
    this.listenForFocusFilterShortcut
  )
}