Vue自定义节流指令

最新推荐文章于 2024-03-05 12:17:57 发布

_nicedays

最新推荐文章于 2024-03-05 12:17:57 发布

阅读量694

点赞数

分类专栏： Vue js 前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qqq6654066/article/details/122288538

版权

前端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

Vue

16 篇文章 0 订阅

订阅专栏

首先创建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上面挂载