我有以下Vue事件处理程序与contenteditable：
<div contentEditable="true" v-on:keyup="changed($event,current,0)" v-on:paste="changed($event,0)" v-on:blur="changed($event,0)" v-on:delete="changed($event,0)" v-on:focused="changed($event,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,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>
