我有以下带有 contenteditable 的 Vue 事件处理程序:
<div contentEditable="true"
v-on:keyup="changed($event, current, 0)"
v-on:paste="changed($event, current, 0)"
v-on:blur="changed($event, current, 0)"
v-on:delete="changed($event, current, 0)"
v-on:focused="changed($event, current, 0)"></div>
但是,我有很多地方调用相同的代码,而且代码变得又长又冗长。有没有办法组合事件处理程序?像这样的东西:
v-on:keyup:paste:blur:delete:focused
?
最佳答案
您可以为此创建自定义指令。此示例可以帮助您:
Vue.directive('wrap-on', {
bind: function(el, binding, vnode) {
// Keep function to remove the event later.
el.wrappedEventFunctions = el.wrappedEventFunctions || {};
el.wrappedEventFunctions[binding.rawName] = binding.value;
for (var key in binding.modifiers) {
// Check if element is a vue component
if (vnode.componentInstance) {
vnode.componentInstance.$on(key, binding.value);
} else {
el.addEventListener(key, binding.value);
}
}
},
unbind: function(el, binding, vnode) {
for (var key in binding.modifiers) {
if (vnode.componentInstance) {
vnode.componentInstance.$off(key, el.wrappedEventFunctions[binding.rawName]);
} else {
el.removeEventListener(key, el.wrappedEventFunctions[binding.rawName]);
}
}
}
})
该指令将向元素添加事件处理程序。它检查元素是否是 vue 组件;如果它是一个 vue 组件,它会通过 $on
注册事件。如果它不是 vue 组件,它使用 addEventListener
。如果需要,您可以更改此行为。
用法如下:
<input v-wrap-on.click.keydown="mixedCallback" />
或者:
<some-custom-component v-wrap-on.click.keydown="mixedCallback">
...
</some-custom-component>
关于javascript - Vue 组合事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42334179/