vue自定义指令实现表单重复提交问题

216 阅读1分钟

(1)在工具类utils中定义自定义指令

export default {
    install(Vue) {
        Vue.directive('preventReClick', {
            inserted(el, binding) {
                el.addEventListener('click', () => {
​
                    const events = el.style.pointerEvents
​
                    if (events == "") {
                        el.style.pointerEvents = 'none'
                        setTimeout(() => {
                            el.style.pointerEvents = "";
                        }, binding.value || 1000); //默认是1s
                    }
​
                    // if (!el.disabled) {
                    //     el.disabled = true;
                    //     setTimeout(() => {
                    //         el.disabled = false;
                    //     }, binding.value || 1000);
                    // }
​
                })
            }
        })
    }
}

(2)在main.js中全局引入

import preventReClick from './utils/directive/preventReClick'
Vue.use(preventReClick)

(3)页面中使用:3000代表3秒点击间隔

<button @click="testClick" v-preventReClick="3000">测试</button>