Vue结合事件处理程序

问题描述

我有以下Vue事件处理程序和contenteditable：

 < div contentEditable =true
 v -on：keyup =changed（$ event，current，0）
 v-on：paste =changed（$ event，current，0）
 v-on：blur =changed（ 
 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 ，绑定，vnode）{
 //保存函数以后删除事件
 el.wrappedEventFunctions = el.wrappedEventFunctions || {}; 
 el.wrappedEventFunctions [binding.rawName] = binding .value; 
 
（var key in binding.modifiers）{
 //检查元素是否是vue组件
 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组件，它通过 $在上注册事件。如果它不是一个vue组件，它使用 addEventListener 。你可以改变这种行为，如果你想要的。

而且用法如下：

 < input v-wrap-on.click.keydown =mixedCallback/> 
  

或者：

 < some-custom-component v-wrap-on.click.keydown =mixedCallback> 
 ... 
< / some-custom-component> 
  

I have the following Vue event handlers with contenteditable:

<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>

However, I have many places where I call the same code and the code is getting long and verbose. Is there a way to combine event handlers? Something like:

v-on:keyup:paste:blur:delete:focused ?

解决方案

You can create your custom directive for this purpose. This sample may help you:

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]);
      }
    }
  }
})

This directive will add event handlers to the element. It checks if the element is a vue component; if it is a vue component it registers the events via $on. If it is not a vue component it uses addEventListener. You can change this behavior if you want.

And usage is like:

<input v-wrap-on.click.keydown="mixedCallback" />

Or:

<some-custom-component v-wrap-on.click.keydown="mixedCallback">
    ...
</some-custom-component>

这篇关于Vue结合事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！