防重復點擊或提交,在項目中是必不可少住拭,如果封裝成一個組件挪略,但是點擊的按鈕的樣式千差萬別,有<button>和<a>有<div>各種實現(xiàn)废酷,很難做到通用瘟檩,然后就想到了用指令去實現(xiàn)。
直接上代碼:
1澈蟆、定義一個指令
Vue.directive('preventReClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 2000)
}
})
}
})
html
<a class="btn" href="javascript:;" v-preventReClick="3000" @click.prevent="pay($event)">立即投保</a>
javascript
pay (event) {
if (event.target.disabled) {
// 點擊太頻繁了
return
}
...
}
大家還有沒有優(yōu)化建議哈墨辛,請不吝賜教!