vue中自定義指令（阻止按鈕重復提交）

1.新建一個文件，directive.js

// 阻止按鈕重復提交
Vue.directive("button", {
    bind: function (el, binding, vnode) { // 每當指令綁定到元素上的時候，會立即執行這個bind函數，只執行一次
        function clickHandler(e) {
            // 這里判斷點擊的元素是否是本身，是本身，則返回
            if (el.contains(e.target)) {
                $(el).attr("disabled", true);
                setTimeout(() => {
                    $(el).attr("disabled", false);
                }, 1500)
                return false;
            }
            // 判斷指令中是否綁定了函數    // 如果綁定了函數 則調用那個函數，此處binding.value就是handleClose方法
            if (binding.expression) {
                binding.value(e);
            }
        }
        // 給當前元素綁定個私有變量，方便在unbind中可以解除事件監聽
        el.__vueClickOutside__ = clickHandler;
        document.addEventListener('click', clickHandler);
    },
    unbind(el, binding) {   // 解除事件監聽
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
    },
})

2.導入

3.使用

原文網址: https://www.jianshu.com/p/1fda465f6c73