javascript – Vue组合事件处理程序

我有以下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>