vue中实现button按钮的重复点击指令
// 注册一个全局自定义指令 `v-debounce`
Vue.directive('debounce', {// 当被绑定的元素插入到 DOM 中时...inserted: function (el, binding) {let timer;el.addEventListener('click', () => {clearTimeout(timer);timer = setTimeout(() => {binding.value(); // 调用传给指令的方法}, 500);});},// 当绑定元素的父组件更新时...update: function (el, binding) {let timer;el.addEventListener('click', () => {clearTimeout(timer);timer = setTimeout(() => {binding.value(); // 调用传给指令的方法}, 500);});}
});// 使用指令
// 在组件中
<template><button v-debounce="myClickHandler">Click me</button>
</template><script>
export default {methods: {myClickHandler() {// 处理点击事件}}
}
</script>