时间戳

首页 > 解决方案 > 如何在 Vue 中创建自定义 lodash 油门事件修改器？

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

问题描述

在 VueJS 中，有事件修饰符click和key事件，允许诸如click.prevent, click.once, key.up.

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

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

标签： vue.jseventslodash

解决方案

一种选择是创建一个类似于这个的自定义指令 

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>

推荐阅读