Question

我有以下Vue事件处理程序具有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>

但是，我有很多地方可以调用相同的代码并且代码变得冗长而冗长。有没有办法组合事件处理程序？类似的东西：

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

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

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

Answer 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

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

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

Vue结合事件处理程序

4 个答案: