一般点击事件会分不同的情况进行消息提醒，如果不做处理，短短几秒弹出很多条提示信息，就会很烦，比如：
那要怎么控制这个提示信息只能出现单条呢
再点击事件的方法最前面加上
定义变量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 防止多次点击的实践的文章就介绍到这了,更多相关vue 防止多次点击内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
黄山市民网：https://www.huangshanshimin.com/
