在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) // 傳入綁定值就使用，默認3000毫秒內不可重復觸發}})} })export default { preventReClick }

在main.js文件中全局引入

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

使用方法

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。