[英]How to dynamically assign keyboard events in Vue JS
When I bind keydown event for alt + 1
combination on the main component's element like so:当我在主组件的元素上为
alt + 1
组合绑定 keydown 事件时,如下所示:
<div
@keydown.alt.49.prevent.exact="doSomething()"
>
It works, but when I try to bind it dynamically based on some logic in created (inspired by Programmatically bind custom events for dynamic components in VueJS ):它可以工作,但是当我尝试根据创建的某些逻辑动态绑定它时(灵感来自Programmatically bind custom events for dynamic components in VueJS ):
created() {
this.$on('keydown.alt.49.prevent.exact', doSomething);
},
It does not work.这没用。 What am I doing wrong?
我究竟做错了什么?
The first argument of vm.$on()
is the event name , but you've passed it the event name along with the event modifiers , which are only valid in the template. vm.$on()
的第一个参数是事件名称,但您已将事件名称与事件修饰符一起传递给它,这些修饰符仅在模板中有效。
keydown // Event name
.alt.49.prevent.exact // Event modifiers
An equivalent method that implements the event modifiers would look like this:实现事件修饰符的等效方法如下所示:
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()
}
}
}
}
To add that event handler to the div
, apply a template ref
:要将该事件处理程序添加到
div
,请应用模板ref
:
<div ref="myEl"></div>
Then access the element via this.$refs
, and use the element's native addEventListener()
:然后通过
this.$refs
访问元素,并使用元素的原生addEventListener()
:
this.$refs.myEl.addEventListener('keydown', this.eventHandler)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.