如何在 Vue 中创建自定义 lodash 油门事件修改器？答案

【问题标题】：How do I create a custom lodash throttle event modifier in Vue?如何在 Vue 中创建自定义 lodash 油门事件修改器？
【发布时间】：2019-11-29 05:26:53
【问题描述】：

在 VueJS 中，click 和 key 事件的事件修饰符允许 click.prevent、click.once、key.up 之类的事情。

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

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

【问题讨论】：

标签： vue.js events lodash

【解决方案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>

【讨论】：

感谢您的回答。因此，基本上，您建议放弃自定义事件修饰符的想法，而是使用自定义指令来解决相同的问题。这似乎是一个合乎逻辑的选择。出于好奇，是否可以在除 Vue 的 v-on 指令之外的自定义指令上创建自定义事件修饰符？
这是一个有趣的问题，我不知道。如果有人能展示如何实现它会很高兴
看起来你可以使用binding.modifiers。值得注意的是，修饰符是布尔状态，因此创建一个受限制的事件可能比我预期的要困难一些，因为受限制的等待时间值必须是静态的。不过，似乎无法在正常事件上使用修饰符，因为您无法挂钩原生 v-on 指令。