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

如何解决如何在Vue JS中动态分配键盘事件

当我在主要组件的元素上绑定alt + 1组合的keydown事件时，如下所示：

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

它可以工作，但是当我尝试根据创建的某些逻辑动态绑定它时（受Programmatically bind custom events for dynamic components in VueJS启发）：

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

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

解决方法

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