Vue中防止按钮的多次点击

通过自定义指令的方式，这样简单方便

debounce.js

export default {
    install(Vue) {
        Vue.directive("debounce", {
            // bind 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置,比如我们可以设置样式
            bind(el) {
                // console.log(el)
            },
            // 被绑定的元素插入到父节点时
            inserted(el, binding) {
                el.addEventListener('click', function () {
                    let time = binding.value.time;
                    let methods = binding.value.methods;
                    clearTimeout(el.timeId)
                    el.timeId = setTimeout(() => {
                        methods()
                    }, time);

                })
            }
        })
    }
}

main.js

import debounce from "./directive/debounce"

Use:

// 传入需要指定的时间，以及对应的事件处理函数

参考链接： https://www.jianshu.com/p/fa2...