vue2项目-防抖

新建preventReClick.js

import Vue from 'vue'
const debounce = Vue.direvtive('debounce', {
    inserted: function (el, binding) {
        let timer
        const { fn, params, event, delay } = binding.value
        const handler = () => {
            if (timer) {
                clearTimeout(timer)
            }
            if (binding.value.hasOwnProperty('params')) {
                timer = setTimeout(() => {
                    fn(params)
                }, delay | 1000)
            } else {
                timer = setTimeout(() => {
                    binding.value()
                }, 1000)
            }
        }
        el.addEventListener(event || 'click', handler)
        el._vueDebounceHandler = handler
    },
    unbind(el) {
        if (el._vueDebounceHandler) {
            el.removeEventListener('click', el._vueDebounceHandler)
            delete el._vueDebounceHandler
        }
    }
})

main.js

import Vue from 'vue'
import debounce from '@/utils/preventReClick.js'
Vue.use(debounce )

使用 ：

<!-- 不传参用法 -->
<el-button v-debounce="submitForm">不传参用法</el-button>
<!-- 传参用法 -->
<el-button
  v-debounce="{
    fn: submitForm,
    params: row,
    event: 'click',
    delay: 1000,
  }"
  >传参用法</el-button
>
 data() {
    return {
        row: {
            'name': '测试防抖传参'
        }
    }
},
  methods: {
    submitForm (id) {
      console.log('防抖', id);
    },
  },