vue.js - 如何在Vue中创建自定义lodash节气门事件修改器？

Question

在VueJS中，有click和key事件的事件修饰符，允许使用click.prevent，click.once和key.up这样的事件。

如何创建自定义事件修饰符？

更具体地说，如何创建mousemove.throttle事件修饰符，以便每当将修饰符添加到事件时都可以应用lodash节流？

Answer 1

选项之一是创建类似于to this one的自定义指令

Vue.directive('throttled-on', {
  bind(el, binding, vnode) {
    const handler = throttle(1000, binding.value)
    let type = binding.arg

    el.addEventListener(type, handler)
  }
})

var app = new Vue({
  el: '#app',
  methods: {
    myMethod() { console.log('Called') }
  }
})

<script src="https://cdn.jsdelivr.net/npm/throttle-debounce@2.1.0/dist/index.cjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div >
  <div
    id="app"
    style="width: 100px; height: 100px; background: red;"
    v-throttled-on:mousemove="myMethod"
  />
 </div>