前言：大家在vue項(xiàng)目開發(fā)中經(jīng)常需要處理表單提交的問(wèn)題，但當(dāng)用戶快速點(diǎn)擊提交按鈕時(shí)河质，會(huì)發(fā)送多個(gè)請(qǐng)求，為了防止這個(gè)問(wèn)題震叙，我們需要對(duì)按鈕進(jìn)行限制掀鹅，下面給大家介紹一個(gè)簡(jiǎn)單的方法。
1.首先建立一個(gè)preventReClick.js的文件, 寫入以下代碼
// 設(shè)置點(diǎn)擊間隔
import Vue from 'vue'
Vue.directive('preventReClick', {
inserted (el) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, 500)
}
})
}
})
2.在main.js文件中引入這個(gè)js文件
import '../preventReClick'
3.在button或el-button標(biāo)簽上綁定該指令
<button v-preventReClick>普通按鈕</button>
<el-button v-preventReClick>Element按鈕</el-button>
注：此方法使用的是button標(biāo)簽的disabled屬性來(lái)控制點(diǎn)擊的媒楼，所以只能用在button類標(biāo)簽上乐尊，其他html標(biāo)簽無(wú)效。
