vue中防止重复点击事件（支持div）

最新推荐文章于 2024-05-30 09:50:55 发布

柒染染呀

最新推荐文章于 2024-05-30 09:50:55 发布

阅读量400

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43818906/article/details/129833542

版权

在全局指令文件中注册，然后再元素中加上v-preventReClick即可使用

    Vue.directive('preventReClick', {
        mounted(el, binding) {
            let timer = null;
            el.addEventListener('click', () => {
                const firstClick = !timer;
                
                if (firstClick) {
                    binding.value();
                }
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    timer = null;
                    if (!firstClick) {
                        binding.value();
                    }
                }, 500);
            });
        }
    });