首先创建directive文件夹用于存放自定义指令,再创建throttle.js文件
在throttle.js中写入
import Vue from 'vue'
Vue.directive('throttle', {
inserted(el, delay) {
el.addEventListener('click', () => {
// 禁用这个指令的DOM结构点击事件
el.style.pointerEvents = 'none';
setTimeout(() => {
// 启动这个指令的DOM结构点击事件
el.style.pointerEvents = 'auto';
}, delay.value || 1000); // 默认1秒
});
}
});
然后在main.js上面挂载
然后在项目中使用
代码可以在GitHub中下载
https://github.com/nicedays/globleThrottle