vue防止多次點(diǎn)擊的實(shí)現(xiàn)方法

本篇內(nèi)容主要講解“vue防止多次點(diǎn)擊的實(shí)現(xiàn)方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue防止多次點(diǎn)擊的實(shí)現(xiàn)方法”吧!

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

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

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

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

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

當(dāng)用戶第二次點(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)擊事件里，以防止用戶多次點(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: '請輸入賬號(hào)',
                            type: 'warning'
                        });
                        return false;
                    }
                    else if (this.password == "") {
                        this.$message({
                            message: '請輸入密碼',
                            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: '用戶未注冊',
                                    type: 'warning'
                                });
                                //跳轉(zhuǎn)到注冊頁面
                                setTimeout(() => {
                                    window.open(this.apiHost + 'userregister/userregister',
                                        '_self');
                                }, 1000)
                            } else if (res.data.code == 12468) { //用戶無用戶名密碼
                                localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/enterAccount', '_parent');
                            } else if (res.data.code == 604) { //用戶無簡歷
                                localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/fillresume', '_parent');
                            } else if (res.data.code == 1077) { //簡歷未通過審核
                                localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/fillresume', '_parent');
                            } else if (res.data.code == 1075) { //簡歷審核中
                                localStorage.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: '請輸入手機(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: '請輸入正確的手機(jī)號(hào)',
                            type: 'warning'
                        });
                        return false;
                    } else if (this.code == "") {
                        this.$message({
                            message: '請輸入驗(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: '用戶未注冊',
                                    type: 'warning'
                                });
                                //跳轉(zhuǎn)到注冊頁面
                                setTimeout(() => {
                                    window.open(this.apiHost + 'userregister/userregister',
                                        '_self');
                                }, 1000)
                            } else if (res.data.code == 12468) { //用戶無用戶名密碼
                                localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/enterAccount', '_parent');
                            } else if (res.data.code == 604) { //用戶無簡歷
                                localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/fillresume', '_parent');
                            } else if (res.data.code == 1077) { //簡歷未通過審核
                                localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/fillresume', '_parent');
                            } else if (res.data.code == 1075) { //簡歷審核中
                                localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
                                window.open(this.apiHost + 'uesr/audit', '_parent');
                            } else {
                                this.$message.error(res.data.message);
                            }
                        })
                    }
                }
            },

到此，相信大家對(duì)“vue防止多次點(diǎn)擊的實(shí)現(xiàn)方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！