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=""
文章来源地址https://www.toymoban.com/news/detail-560659.html
文章来源：https://www.toymoban.com/news/detail-560659.html
到了这里，关于vue防抖 指令 v-debounce的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
