方法:通過(guò)前臺(tái)畫(huà)面將按鈕變成不可編輯的狀態(tài)來(lái)實(shí)現(xiàn)
步驟如下:文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-606537.html
1.新建js文件(preventReClick.js)
import Vue from 'vue'
// 防止重復(fù)提交指令
const preventReClick = Vue.directive('preventReClick', {
inserted(el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
//默認(rèn)500毫秒后執(zhí)行
setTimeout(() => {
el.disabled = false
}, binding.value || 500)
}
})
}
})
export default{ preventReClick }
2.在main.js文件中導(dǎo)入文件并引用
//文件目錄
import preventReClick from './utils/preventReClick.js'
Vue.use(preventReClick)
3. 完成前面兩個(gè)步驟該方法即可被全局調(diào)用
在按鈕中引用(添加指令 v-prevent-re-click ):文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-606537.html
<a-button type="primary" @click="handleSubmit" v-prevent-re-click>確定</a-button>
到了這里,關(guān)于vue 防止快速點(diǎn)擊導(dǎo)致重復(fù)調(diào)用接口的解決方法的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!