美文网首页
vue防止重复点击

vue防止重复点击

作者: 秀萝卜 | 来源:发表于2021-12-22 15:31 被阅读0次

https://www.cnblogs.com/ybixian/p/13597828.html

上面的是防止el-button的,利用了el-button的disabled功能
如果是div怎么办呢?

如果是div的解决办法:
import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {
    inserted(el, binding) {
        function __avoidRepeatHandler__() {
            if (el.__clickDisabled__) return;

            el.__clickDisabled__ = true;
            el.__originalPointerEvents__ = el.style.pointerEvents;
            el.style.pointerEvents = 'none';
            setTimeout(() => {
                el.__clickDisabled__ = false;
                el.style.pointerEvents = el.__originalPointerEvents__;
            }, binding.value || 1000)
        }
        el.addEventListener('click', __avoidRepeatHandler__);
        el.__avoidRepeatHandler__ = __avoidRepeatHandler__;
    },
    unbind(el) {
        el.removeEventListener('click', el.__avoidRepeatHandler__);
        delete el.__clickDisabled__;
        delete el.__originalPointerEvents__;
    }
});

export { preventReClick }

相关文章

网友评论

      本文标题:vue防止重复点击

      本文链接:https://www.haomeiwen.com/subject/libqqrtx.html