main.js
/**
* @description Vue自定义指令
* @param argment[0] {type: String}
* @param argment[1] {type: Object} 在绑定组件中的各个生命周期中书写业务,这里使用inserted(){}
*/
Vue.directive('shake', {
/**
* @description () 在Dom父组件被挂载前的钩子函数中使用
* @param el {type: Object}绑定元素的节点
* @param binding {type: 所有合法的JS表达式}
* */
inserted (el, binding) {
console.log(el, binding, 'ooooooooooooooo')
let timer = null
el.addEventListener('click', () => {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
binding.value()
}, 300)
}, false)
}
})
组件.vue文件:
<template>
<div>
<button v-shake="abc" >点我</button>
</div>
</template>
<script>
export default {
methods: {
abc () {
console.log('ffff')
},
}
</script>
vue2 自定义防抖指令
最新推荐文章于 2024-08-02 17:03:17 发布