javascript - 如何在 Vue JS 中动态分配键盘事件

Question

当我像这样在主要组件的元素上为 alt + 1 组合绑定(bind) keydown 事件时:

<div
    @keydown.alt.49.prevent.exact="doSomething()"
>

它有效，但是当我尝试根据创建的某些逻辑动态绑定(bind)它时(受 Programmatically bind custom events for dynamic components in VueJS 启发):

created() {
    this.$on('keydown.alt.49.prevent.exact', doSomething);
},

它不起作用。我做错了什么？

Answer 1

vm.$on() 的第一个参数是事件名称，但您已将事件名称与event modifiers 一起传递给它，仅在模板中有效。

keydown                 // Event name
.alt.49.prevent.exact   // Event modifiers

实现事件修饰符的等效方法如下所示:

export default {
  methods: {
    eventHandler(e) {
      // .alt.49
      //   `keyCode` 49 is deprecated, so use `key` equivalent
      //   for Alt+1: the inverted exclamation point, not '1'
      const isAlt1 = e.altKey && e.key === '¡'

      // .exact
      const isExact = !e.shiftKey && !e.ctrlKey && !e.metaKey

      if (isAlt1 && isExact) {
        // .prevent
        e.preventDefault()

        // this.doSomething()
      }
    }
  }
}

要将该事件处理程序添加到 div，请应用 template ref :

<div ref="myEl"></div>

然后通过this.$refs访问元素，并使用元素的原生 addEventListener() :

this.$refs.myEl.addEventListener('keydown', this.eventHandler)

demo