在plugins文件夾新建directives.js文件

import Vue from 'vue'const preventReClick = Vue.directive('preventReClick', {inserted: function(el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 3000) // 傳入綁定值就使用，默認(rèn)3000毫秒內(nèi)不可重復(fù)觸發(fā)}})} })export default { preventReClick }

在main.js文件中全局引入

import preventReClick from './plugins/directives.js' Vue.use(preventReClick)

使用方法

// v-preventReClick默認(rèn)為3000 ，也可以設(shè)置 <button class="btn-rgt" v-preventReClick= "1000" @click="goPay(3)">同意</button>

總結(jié)

以上是生活随笔為你收集整理的vue 防止表单重复提交的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。