vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令方式
更新時(shí)間：2024年08月29日 10:07:47 作者：zhooson
這篇文章主要介紹了vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue實(shí)現(xiàn)button按鈕的重復(fù)點(diǎn)擊指令
// 注冊一個(gè)全局自定義指令 `v-debounce`
Vue.directive('debounce', {
// 當(dāng)被綁定的元素插入到 DOM 中時(shí)...
inserted: function (el, binding) {
let timer;
el.addEventListener('click', () => {
clearTimeout(timer);
timer = setTimeout(() => {
binding.value(); // 調(diào)用傳給指令的方法
}, 500);
});
},
// 當(dāng)綁定元素的父組件更新時(shí)...
update: function (el, binding) {
let timer;
el.addEventListener('click', () => {
clearTimeout(timer);
timer = setTimeout(() => {
binding.value(); // 調(diào)用傳給指令的方法
}, 500);
});
}
});
// 使用指令
// 在組件中
<template>
<button v-debounce="myClickHandler">Click me</button>
</template>
<script>
export default {
methods: {
myClickHandler() {
// 處理點(diǎn)擊事件
}
}
}
</script>
vue提交表單重復(fù)點(diǎn)擊，重復(fù)提交防抖問題
問題：用戶點(diǎn)擊保存時(shí)，可能會多次點(diǎn)擊。導(dǎo)致生成重復(fù)數(shù)據(jù)。
目標(biāo)：多次點(diǎn)擊時(shí)，1s內(nèi)只允許提交一次數(shù)據(jù)。
解決方案
1.在utils文件夾創(chuàng)建文件preventReClick.js
export default {
install (Vue) {
// 防止按鈕重復(fù)點(diǎn)擊
Vue.directive('preventReClick', {
inserted (el, binding) {
// console.log("binding-7", binding)
el.addEventListener('click', () => {
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 2000)
}
})
}
})
}
}2.在main.js中引入
3、在.vue 文件中使用
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中@keyup.enter?@v-model.trim的用法小結(jié)
這篇文章主要介紹了Vue中@keyup.enter?@v-model.trim的用法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-12-12
這篇文章主要介紹了在vue中如何引入外部的css文件，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析，技術(shù)點(diǎn)較多，所以篇幅較長，認(rèn)真閱覽的你一定會學(xué)到很多知識，需要的朋友可以參考下2022-09-09
vue3純前端表格數(shù)據(jù)的導(dǎo)出與導(dǎo)入實(shí)現(xiàn)方式
這篇文章主要介紹了如何在純前端環(huán)境下使用xlsx-js-style庫進(jìn)行Excel表格文件的下載,并自定義樣式,還提到了使用xlsx庫進(jìn)行Excel表格數(shù)據(jù)的導(dǎo)入,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
眾所周知，vue 的 mixins 是個(gè)非常靈活，但又很容易帶來混亂的 API，Mixins 本該是一種強(qiáng)大的重用代碼的手段，但使用之后往往帶來更多的混亂，代碼變得不易維護(hù)，本文就詳細(xì)介紹Vue Mixin的正確用法,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue組件間數(shù)據(jù)傳遞的方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
npm install報(bào)錯(cuò)缺少python問題及解決
這篇文章主要介紹了npm install報(bào)錯(cuò)缺少python問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
本文主要介紹了vue中v-if失效原因及解決方法,一般v-if失效都是和綁定變量有關(guān),下面就來具體介紹一下,感興趣的可以了解一下2023-09-09
這篇文章主要介紹了Vue.js按鍵修飾符及v-model修飾符，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動態(tài)組件時(shí)，會緩存不活動的組件實(shí)例，而不是銷毀，這篇文章主要介紹了詳解Vue中keep-alive的使用,需要的朋友可以參考下2023-03-03