溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了Vue如何實現禁止短時間連續點擊事件，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
如果連續點擊提交按鈕，可能會重復提交數據，導致出錯，解決的方法可以使用disabled限制點擊，感覺體驗不是太好，所有給大家分享下面的方法
<el-button @click="throttle()">測試</el-button>
export default {
data(){
return {
lastTime:0 //默認上一次點擊時間為0
}
}
}methods:{
throttle(){
//獲取當前時間的時間戳
let now = new Date().valueOf();
//第一次點擊
if(this.lastTime == 0){
console.log('觸發事件');
this.lastTime = now;
}else{
if((now-this.lastTime) > 2000){
//重置上一次點擊時間，2000是我自己設置的2秒間隔，根據自己的需要更改
this.lastTime = now;
console.log('間隔大于2秒，觸發方法');
//添加自己要調用的方法
}else{
console.log('不觸發');
}
}
},
}這種方法雖然很好，但是遇到請求超時的情況可能不是太好處理（網絡原因、數據太大）。考慮通過后端是否返回res來控制。方法還有待提高！僅供參考~
補充知識：解決vuex中module過多時，需一個個引入的問題
在項目開發中，使用vuex，如果項目過大，vuex就需要模塊化，但是如果module分的過多，我們就需要在store的index.js中一個個引入，這樣未免太麻煩，所以webpack出來了個配置，可以解決這個問題，無需多次引入，懶癌患者福音，
以下是解決方案
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store配置了這個后就無需一個個引入模塊了；
上述內容就是Vue如何實現禁止短時間連續點擊事件，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
