vue防止多次点击的实现方法
短信预约 -IT技能 免费直播动态提醒
本篇内容主要讲解“vue防止多次点击的实现方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue防止多次点击的实现方法”吧!
一般点击事件会分不同的情况进行消息提醒，如果不做处理，短短几秒弹出很多条提示信息，就会很烦，比如：
那要怎么控制这个提示信息只能出现单条呢
再点击事件的方法最前面加上
定义变量hasRemind来控制是否执行点击事件里的相应操作
当用户第一次点击的时候，hasRemind = false，此时，进入到第二个if语句，讲hasRemind的值改变为true，并且在3秒后再将hasRemind的值改为false，这是情况下，用户可以正常进入到点击事件里的所有流程
当用户第二次点击的时候，hasRemind=true，此时直接跳出点击事件，等待hasRemind的值为false的时候才能继续进行该点击方法里的系列流程
//默认可以触发登录的点击事件hasRemind:false,//防止连续多次点击let vm = this;if(this.hasRemind === true) return;if(this.hasRemind === false){ this.hasRemind = true; setTimeout(function(){ vm.hasRemind = false; },3000)}（这里就是将上述代码段放在了登录的点击事件里，以防止用户多次点此，出现很多条提示信息的情况）
// "个人登录点击事件" registerBtn() { //防止连续多次点击 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) { //账号密码登录 if (this.username == "") { this.$message({ message: '请输入账号', 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' }); //跳转到注册页面 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 { //验证码登录 if (this.phone == "") { this.$message({ message: '请输入手机号', 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: '请输入正确的手机号', type: 'warning' }); return false; } else if (this.code == "") { this.$message({ message: '请输入验证码', 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' }); //跳转到注册页面 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); } }) } } },到此，相信大家对“vue防止多次点击的实现方法”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
