javascript – Vue组合事件处理程序

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/js/154224.html

猜你在找的JavaScript相关文章