關於vue表單提交防雙/多擊
阿新 • • 發佈:2019-02-06
先說下出現場景:
測試這次比較極端(也有可能是測試又學會什麼新知識了,哈哈),說是在點選提交和呼叫之間有可能有狂暴的使用者在多連擊,就像打遊戲一樣,呼叫介面後的loading狀態切換就無效了
然後,就只好自己寫了個基於vue防多擊的指令,小小偷懶了下,我裡面已經注入fastClick了,因此響應方法是極快的,因此只需要稍微控制下二次點選的時間即可
export default {}.install = (Vue, options = {}) => {
Vue.directive('dbClick', {
inserted(el, binding) {
el.addEventListener('click' , e => {
if(!el.disabled) {
el.disabled = true;
let timer = setTimeout( () => {
el.disabled = false;
},1000)
}
})
}
})
}
用法:
<pr-col hor="center"><mt-button v-dbClick type="primary" @click="saveOrder">儲存</mt-button ></pr-col>