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>

相关文章

kindeditor4.x代码高亮功能默认使用的是prettify插件,prett...
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代...
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小