阅读 269

vue 防连点 自定义指令(亲测可用)

// 代码
const pointDoms = []; // 使用这个指令的所有DOM对象
Vue.directive('points', {
    inserted(el, binding) {
        pointDoms.push(el); // 存储使用这个指令的DOM
        el.addEventListener('click', () => {
            // 禁用所有使用这个指令的DOM结构点击事件
            pointDoms.forEach(pointItem => {
                pointItem.style.pointerEvents = 'none';
            });
            setTimeout(() => {
                // 启动所有使用这个指令的DOM结构点击事件
                pointDoms.forEach(pointItem => {
                    pointItem.style.pointerEvents = 'auto';
                });
            }, binding.value || 350);
        });
    }
});
复制代码
<!-- 使用 -->

<!-- 默认防连点 间隔 500毫秒 -->
<div v-points></div>

<!-- 自定义设置 防连点 间隔 300毫秒 -->
<div v-points="300"></div>
复制代码