一般點(diǎn)擊事件會(huì)分不同的情況進(jìn)行消息提醒，如果不做處理，短短幾秒彈出很多條提示信息，就會(huì)很煩，比如：

那要怎么控制這個(gè)提示信息只能出現(xiàn)單條呢

再點(diǎn)擊事件的方法最前面加上

定義變量hasRemind來(lái)控制是否執(zhí)行點(diǎn)擊事件里的相應(yīng)操作

當(dāng)用戶(hù)第一次點(diǎn)擊的時(shí)候，hasRemind = false，此時(shí)，進(jìn)入到第二個(gè)if語(yǔ)句，講hasRemind的值改變?yōu)閠rue，并且在3秒后再將hasRemind的值改為false，這是情況下，用戶(hù)可以正常進(jìn)入到點(diǎn)擊事件里的所有流程

當(dāng)用戶(hù)第二次點(diǎn)擊的時(shí)候，hasRemind=true，此時(shí)直接跳出點(diǎn)擊事件，等待hasRemind的值為false的時(shí)候才能繼續(xù)進(jìn)行該點(diǎn)擊方法里的系列流程

//默認(rèn)可以觸發(fā)登錄的點(diǎn)擊事件hasRemind:false,

//防止連續(xù)多次點(diǎn)擊let vm = this;if(this.hasRemind === true) return;if(this.hasRemind === false){ this.hasRemind = true; setTimeout(function(){ vm.hasRemind = false; },3000)}

（這里就是將上述代碼段放在了登錄的點(diǎn)擊事件里，以防止用戶(hù)多次點(diǎn)此，出現(xiàn)很多條提示信息的情況）

// '個(gè)人登錄點(diǎn)擊事件' registerBtn() {//防止連續(xù)多次點(diǎn)擊let vm = this;if(this.hasRemind === true) return;if(this.hasRemind === false){ this.hasRemind = true; setTimeout(function(){vm.hasRemind = false; },3000)}var qs = Qs;if (this.logintype == 1) { //賬號(hào)密碼登錄 if (this.username == '') {this.$message({ message: ’請(qǐng)輸入賬號(hào)’, type: ’warning’});return false; } else if (this.password == '') {this.$message({ message: ’請(qǐng)輸入密碼’, type: ’warning’});return false; } else {request_POST(’/login’, qs.stringify({ identity: this.username, desStr: this.password, loginType: 1, loginRole: 0})).then((res) => { if (res.data.code == 200) {localStorage.setItem('token', res.data.data['JEECMS-Auth-Token']);//登陸成功// window.open(this.apiHost + ’uesr/resume’, ’_parent’)window.open(this.apiHost + ’index/index’, ’_parent’) } else if (res.data.code == 12462) {this.$message({ message: ’用戶(hù)未注冊(cè)’, type: ’warning’});//跳轉(zhuǎn)到注冊(cè)頁(yè)面setTimeout(() => { window.open(this.apiHost + ’userregister/userregister’,’_self’);}, 1000) } else if (res.data.code == 12468) { //用戶(hù)無(wú)用戶(hù)名密碼localStorage.setItem('token', res.data.data['JEECMS-Auth-Token']);window.open(this.apiHost + ’uesr/enterAccount’, ’_parent’); } else if (res.data.code == 604) { //用戶(hù)無(wú)簡(jiǎn)歷localStorage.setItem('token', res.data.data['JEECMS-Auth-Token']);window.open(this.apiHost + ’uesr/fillresume’, ’_parent’); } else if (res.data.code == 1077) { //簡(jiǎn)歷未通過(guò)審核localStorage.setItem('token', res.data.data['JEECMS-Auth-Token']);window.open(this.apiHost + ’uesr/fillresume’, ’_parent’); } else if (res.data.code == 1075) { //簡(jiǎn)歷審核中l(wèi)ocalStorage.setItem('token', res.data.data['JEECMS-Auth-Token']);window.open(this.apiHost + ’uesr/audit’, ’_parent’); } else {this.$message.error(res.data.message); }}) }} else { //驗(yàn)證碼登錄 if (this.phone == '') {this.$message({ message: ’請(qǐng)輸入手機(jī)號(hào)’, type: ’warning’});return false; } else if (!(/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test( this.phone))) {this.$message({ message: ’請(qǐng)輸入正確的手機(jī)號(hào)’, type: ’warning’});return false; } else if (this.code == '') {this.$message({ message: ’請(qǐng)輸入驗(yàn)證碼’, type: ’warning’});return false; } else {request_POST(’/login’, qs.stringify({ identity: this.phone, captcha: this.code, loginType: 2, loginRole: 0})).then((res) => { if (res.data.code == 200) {localStorage.setItem('token', res.data.data['JEECMS-Auth-Token']);window.open(this.apiHost + ’uesr/resume’, ’_parent’); } else if (res.data.code == 12462) {this.$message({ message: ’用戶(hù)未注冊(cè)’, type: ’warning’});//跳轉(zhuǎn)到注冊(cè)頁(yè)面setTimeout(() => { window.open(this.apiHost + ’userregister/userregister’,’_self’);}, 1000) } else if (res.data.code == 12468) { //用戶(hù)無(wú)用戶(hù)名密碼localStorage.setItem('token', res.data.data['JEECMS-Auth-Token']);window.open(this.apiHost + ’uesr/enterAccount’, ’_parent’); } else if (res.data.code == 604) { //用戶(hù)無(wú)簡(jiǎn)歷localStorage.setItem('token', res.data.data['JEECMS-Auth-Token']);window.open(this.apiHost + ’uesr/fillresume’, ’_parent’); } else if (res.data.code == 1077) { //簡(jiǎn)歷未通過(guò)審核localStorage.setItem('token', res.data.data['JEECMS-Auth-Token']);window.open(this.apiHost + ’uesr/fillresume’, ’_parent’); } else if (res.data.code == 1075) { //簡(jiǎn)歷審核中l(wèi)ocalStorage.setItem('token', res.data.data['JEECMS-Auth-Token']);window.open(this.apiHost + ’uesr/audit’, ’_parent’); } else {this.$message.error(res.data.message); }}) }} },

到此這篇關(guān)于vue 防止多次點(diǎn)擊的實(shí)踐的文章就介紹到這了,更多相關(guān)vue 防止多次點(diǎn)擊內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！