Vue自定义节流指令

首先创建directive文件夹用于存放自定义指令,再创建throttle.js文件

Vue自定义节流指令

在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上面挂载

Vue自定义节流指令

然后在项目中使用

Vue自定义节流指令

代码可以在GitHub中下载

https://github.com/nicedays/globleThrottle

上一篇:Vue学习[条件和循环]


下一篇:EL表达式和JSP标准标签库