vue中禁用点击提交3秒后，再启用

<p v-previentClick @click="handleFun">点击</p>
<el-button v-previentClick @click="handleFun">点击</button>

使用Vue自定义指令directives

1. 没有disabled属性的标签（div、p）

// 标签中使用自定义指令
<p v-previentClick @click="handleFun">点击</p>

// 当前vue组件使用
export default {
   data() {
      return {     
      };
    },
   directives: {
       previentClick: {
            inserted(el,binding) {
                el.addEventListener('click',()=>{
                    if(!el.pointerEvents){
                        el.style.pointerEvents = 'none'
                        setTimeout(()=>{
                            el.style.pointerEvents = 'auto'
                        },binding.arg || 3000)
                    }
                })
            }
        }
    },
    methods: {
        handleFun() {
            console.log('点击')
        },
    },
}

2.有disabled属性的标签(button)

// 标签中使用自定义指令
<el-button v-previentClick @click="handleFun">点击</button>

// 当前vue组件使用
export default {
   data() {
      return {     
      };
    },
   directives: {
       previentClick: {
            inserted(el,binding) {
                el.addEventListener('click',()=>{
                    if(!el.disabled){
                        el.disabled = true
                        setTimeout(()=>{
                            el.disabled = false
                        },binding.arg || 3000)
                    }
                })
            }
        }
    },
    methods: {
        handleFun() {
            console.log('点击')
        },
    },
}