1.按鈕點擊后添加loading，介面回傳成功后再移除loading（經過多次嘗試發現，此方法不能完全確保只呼叫一次介面，第二次添加時仍會多次呼叫介面），方法如下：
html代碼：
<el-button @click="onSave" :loading="onLoading">保存</el-button>
javascript代碼：
<script> export default { data() { return { onl oading: false, }; }, methods: { onSave() { this.onLoading = true; let parmas = { //這里是介面傳入引數 }; insert(parmas) .then((res) => { if (res.code === 200) {this.$message.success(res.message); this.onLoading = false; } else { this.$message.error(res.message); this.onLoading = false; } }) .catch((error) => { console.log(error); }); }, }, }; </script>
2.在規定時間內禁用按鈕，按鈕無法點擊，即實作介面不被多次呼叫，方法如下：
html代碼：
<el-button @click="onSave" :disabled="isdisabled">保存</el-button>
javascript代碼：
<script> export default { data() { return { isdisabled: false, }; }, methods: { onSave() { this.isdisabled = true; //這里使用定時器解除按鈕禁用 setTimeout(() => { this.isdisabled = false; }, 1500); let parmas = { //這里是介面傳入引數 }; insert(parmas) .then((res) => { if (res.code === 200) {this.$message.success(res.message); } else { this.$message.error(res.message); } }) .catch((error) => { console.log(error); }); }, }, }; </script>
3.使用Vue自定義全域指令或區域指令
html代碼：
<el-button @click="onSave" v-preventReClick>保存</el-button>
- 自定義全域指令
javascript代碼：
//使用Vue.directive()來自定義全域注冊指令，在main.js中加入下方這段代碼，可以全域應用 Vue.directive("preventReClick", { inserted(el, binding) { el.addEventListener("click", () => { if (!el.disabled) { el.disabled = true; setTimeout(() => { el.disabled = false; }, binding.value || 2000); } }); }, });
- 自定義區域指令
javascript代碼：
//在export default {} 中加入下方這段代碼，可以區域應用 directives: { preventReClick: { // 指令的定義 inserted(el, binding) { el.addEventListener('click', () => { if (!el.disabled) { el.disabled = true setTimeout(() => { el.disabled = false }, binding.value || 2000) } }) } } }
4.使用節流函式
節流：是指一種在指定事件防止函式被頻繁呼叫的思想
節流函式：是結合時間戳封裝的函式，在指定時間內會呼叫一次方法
html代碼：
<el-button @click="getTrottle">保存</el-button>
javascript代碼：
<script> const throttle = (func, wait = 50) => { //上一次執行該函式的時間 let lastTime = 0; return function (...args) { // 當前時間 let now = +new Date(); // 將當前時間和上一次執行函式時間對比 // 如果差值大于設定的等待時間就執行函式 if (now - lastTime > wait) { lastTime = now; func.apply(this, args); } }; }; export default { data() { return { getTrottle: undefined, }; }, created() { this.getTrottle = throttle(this.onSave, 3000); }, methods: { onSave() { let parmas = { //這里是介面傳入引數 }; insert(parmas) .then((res) => { if (res.code === 200) { this.$message.success(res.message); } else { this.$message.error(res.message); } }) .catch((error) => { console.log(error); }); }, }, }; </script>
以上就可以實作了，如果需要多次使用節流函式，也可以封裝后再使用：
// 封裝節流函式 // 引數:1.回呼函式，2.時間，3.布林值 // 時間戳: 毫秒值 // 相差的毫秒值 = 結束的時間戳 - 開始的時間戳 function trottle(callback,times,bool) { // 記錄開始的時間戳 var startTime = new Date().getTime(); // 記錄布林值 var fistFlag = bool; // 回傳function函式 (事件函式) return function() { // 記錄結束的時間戳 var endTime = new Date().getTime(); // 相差的毫秒值 var totalTime = endTime - startTime; // 記錄事件物件 var args = arguments[0]; // 判斷布林值是否為true if(fistFlag){ if(typeof callback == "function"){ // 呼叫回呼函式 callback(args); // 設定布林值為false fistFlag = false; // 重置開始的時間戳 startTime = endTime; } } // 判斷是否達到指定的時間 if(totalTime >= times){ // 符合條件執行回呼函式 if(typeof callback == "function"){ // 呼叫回呼函式 callback(args); // 重置開始的時間戳 startTime = endTime; } } } }
以上就是對于用戶短時間內多次點擊按鈕觸發點擊事件的解決方法，哪位小伙伴有其他更簡單的方法歡迎評論留言交流哦~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541885.html
標籤：其他