Vue 组合事件处理程序

Posted 2023-02-22

【中文标题】Vue 组合事件处理程序

【英文标题】：Vue combine event handlers

【发布时间】：2017-07-09 02:52:01

【问题描述】：

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

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

但是，我在很多地方都调用了相同的代码，而且代码变得冗长而冗长。有没有办法组合事件处理程序？比如：

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

【参考方案1】：

您可以为此创建自定义指令。此示例可能会对您有所帮助：

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

该指令将向元素添加事件处理程序。它检查元素是否是 vue 组件；如果它是一个 vue 组件，它会通过$on 注册事件。如果它不是 vue 组件，它使用addEventListener。您可以根据需要更改此行为。

而用法是这样的：

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

或者：

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

【讨论】：

使用此解决方案 $event 不可用

【参考方案2】：

我认为目前没有办法像您描述的那样组合事件侦听器。

你可以做的是让这个 div 成为它自己的包装组件（例如，名为“editable-wrapper”）并发出一个change 事件：

<div
  contentEditable="true"
  v-on:keyup="$emit('change', $event, current )"
  v-on:paste="$emit('change', $event, current )"
  v-on:blur="$emit('change', $event, current )"
  v-on:delete="$emit('change', $event, current )"
  v-on:focused="$emit('change', $event, current )">
</div>

然后您只需要监听组件上的一个更改事件（data 是具有$event 和current 属性的对象）：

<editable-wrapper @change="changed(data)"></editable-wrapper>

【参考方案3】：

这可能是您实际上需要其他东西的情况。我认为您可以使用watch 功能，它还可以处理“粘贴”和“剪切”事件（使用鼠标）和键盘键。

您只需要像这样为您的财产设置观察者

data: 
    coupon_code: '',        
,
watch: 
    coupon_code: function()
        console.log('watch-'+this.coupon_code);
    ,
,

和 html

<input type="text" autocomplete='off' v-model="coupon_code" >

documenation

【参考方案4】：

我们可以像 object 一样声明事件和事件处理程序并使用 v-on。在您的情况下，您在 mixin 中声明此对象并在所有模板中使用相同的对象。

let eventMixin =  
    data() 
       return 
          events : 
             'keyup' : 'changed($event, current, 0)',
             'focus' : 'changed($event, current, 0)',
       
   


let component = 
   mixins: [eventMixin],
   template: '<div contentEditable="true" v-on=events ></div>

希望这有帮助。 Vue v-on 文档你可以找到here，其中解释了如何将多个事件作为对象传递