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

Question

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

<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);
},

这是行不通的。我究竟做错了什么？

Answer 1

第一个参数vm.$on()是事件名称，但您已将事件名称和事件修饰符一起传递给它，这些修饰符仅在模板中有效。

\n

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

\n

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

\n

export default {\n  methods: {\n    eventHandler(e) {\n      // .alt.49\n      //   `keyCode` 49 is deprecated, so use `key` equivalent\n      //   for Alt+1: the inverted exclamation point, not \'1\'\n      const isAlt1 = e.altKey && e.key === \'\xc2\xa1\'\n\n      // .exact\n      const isExact = !e.shiftKey && !e.ctrlKey && !e.metaKey\n\n      if (isAlt1 && isExact) {\n        // .prevent\n        e.preventDefault()\n\n        // this.doSomething()\n      }\n    }\n  }\n}\n

\n

要将该事件处理程序添加到div，请应用模板ref：

\n

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

\n

然后通过 访问该元素this.$refs，并使用该元素的 native addEventListener()：

\n

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

\n

演示

\n