其他分享
首页 > 其他分享> > Vue自定义节流指令

Vue自定义节流指令

作者:互联网

首先创建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

标签:el,Vue,throttle,节流,自定义,js,指令
来源: https://blog.csdn.net/qqq6654066/article/details/122288538