vue防抖 指令 v-debounce

1.在utils中创建dom.js

/**
 * 功能：dom绑定事件
 * 参数：element(dom节点)
 *      event(事件名称)
 *      handler(回调)
 *返回：无
 * */
 export const on = (function() {
    if (document.addEventListener) {
      return function(element, event, handler) {
        if (element && event && handler) {
          element.addEventListener(event, handler, false)
        }
      }
    } else {
      return function(element, event, handler) {
        if (element && event && handler) {
          element.attachEvent('on' + event, handler)
        }
      }
    }
  })()
  
  /**
   * 功能：移除dom绑定的事件
   * 参数：element(dom节点)
   *      event(事件名称)
   *      handler(回调函数)
   * 返回：无
   * */
  export const off = (function() {
    if (document.removeEventListener) {
      return function(element, event, handler) {
        if (element && event) {
          element.removeEventListener(event, handler, false)
        }
      }
    } else {
      return function(element, event, handler) {
        if (element && event) {
          element.detachEvent('on' + event, handler)
        }
      }
    }
  })()

2.在directive 中创建clickDebounce.js (名字随便)

import { debounce } from 'throttle-debounce'
import { on, off } from '@/utils/dom'

let fn = null
export default {
  name: 'debounce',
  install(Vue, { defaultTime = 600 } = {}) {
    Vue.directive('debounce', {
      bind(el, { value, arg, modifiers }) {
        fn = debounce(arg || defaultTime, value)
        on(el, 'click', fn)
      },

      unbind: function(el) {
        if (fn) {
          off(el, 'click', fn)
        }
      }
    })
  }
}

3.main.js中注册

//防抖
import debounce from './directive/clickDebounce'
Vue.use(debounce)

4. 使用

v-debounce=""