vue防止按钮被多次重复点击封装自定义指令(前端)

在开发过程中,用按钮提交表单,或者按钮功能请求接口,不处理重复点击的话,会出现bug,和重复提交或者多次请求接口, 在vue中可以封装一个自定义指令!

在utils文件下创建一个js文件, 你也可以在main.js文件下直接写

import Vue from 'vue'

const preventReClick = Vue.directive('preventReClick', {
    inserted: function(el, binding) {
        el.addEventListener('click', () => {
            if (!el.disabled) {
                el.disabled = true
                setTimeout(() => {
                    el.disabled = false
                }, binding.value || 2000)
            }
        })
    }
});

export { preventReClick }

引入到main,js

// main,js文件
import './utils/preventReClick'

之后直接使用就可以了

 <button v-preventReClick>这样就防止多次点击了</button>