vue實現(xiàn)button按鈕的重復(fù)點擊指令方式
更新時間:2024年08月29日 10:07:47 作者:zhooson
這篇文章主要介紹了vue實現(xiàn)button按鈕的重復(fù)點擊指令方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue實現(xiàn)button按鈕的重復(fù)點擊指令
// 注冊一個全局自定義指令 `v-debounce` Vue.directive('debounce', { // 當被綁定的元素插入到 DOM 中時... inserted: function (el, binding) { let timer; el.addEventListener('click', () => { clearTimeout(timer); timer = setTimeout(() => { binding.value(); // 調(diào)用傳給指令的方法 }, 500); }); }, // 當綁定元素的父組件更新時... 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() { // 處理點擊事件 } } } </script>
vue提交表單重復(fù)點擊,重復(fù)提交防抖問題
問題:用戶點擊保存時,可能會多次點擊。導(dǎo)致生成重復(fù)數(shù)據(jù)。
目標:多次點擊時,1s內(nèi)只允許提交一次數(shù)據(jù)。
解決方案
1.在utils文件夾創(chuàng)建文件preventReClick.js
export default { install (Vue) { // 防止按鈕重復(fù)點擊 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é)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue中@keyup.enter?@v-model.trim的用法小結(jié)
這篇文章主要介紹了Vue中@keyup.enter?@v-model.trim的用法,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項目引用百度地圖并實現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析,技術(shù)點較多,所以篇幅較長,認真閱覽的你一定會學(xué)到很多知識,需要的朋友可以參考下2022-09-09vue3純前端表格數(shù)據(jù)的導(dǎo)出與導(dǎo)入實現(xiàn)方式
這篇文章主要介紹了如何在純前端環(huán)境下使用xlsx-js-style庫進行Excel表格文件的下載,并自定義樣式,還提到了使用xlsx庫進行Excel表格數(shù)據(jù)的導(dǎo)入,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01