vue触发点击需要点击两次,vue点击事件第一次不能用
本文主要介绍vue可以防止多次点击，可以有效防止恶意点击。文章通过示例代码非常详细，有一定的参考价值。感兴趣的朋友可以参考一下。
一般来说，点击事件会在不同的情况下被提醒消息。如果不处理，短短几秒钟就会弹出很多提示信息，会很烦，比如：
那么如何控制这个提示信息只出现在一条消息中呢？
点击事件的方法，添加到前面。
定义了变量hasRemind来控制是否执行click事件中的相应操作。
当用户第一次点击时，hasRemind=false。此时进入第二条if语句，说hasremain的值改为true，3秒后再将hasremain的值改为false。在这种情况下，用户通常可以在click事件中输入所有流程。
当用户第二次点击时，hasRemind=true。此时click事件会直接跳出来，click方法中的一系列过程只有在hasRemind的值为false时才能继续。
//默认可以触发登录的click事件。
hasRemind:假的，
//防止连续多次单击
设vm=this
if(this.hasRemind===true)返回；
if(this.hasRemind===false){
this.hasRemind=true
setTimeout(function(){
vm.hasRemind=false
},3000)
}
(这里把上面的代码段放在登录点击事件中，防止用户多次点击这个，有很多提示信息)
//个人登录点击事件
registerBtn() {
//防止连续多次单击
设vm=this
if(this.hasRemind===true)返回；
if(this.hasRemind===false){
this.hasRemind=true
setTimeout(function(){
vm.hasRemind=false
},3000)
}
var qs=Qs
if (this.logintype==1) {
//账号密码登录
if (this.username==) {
这个。$message({
消息：“请输入一个帐号”，
类型：“警告”
});
返回false
}
else if (this.password==) {
这个。$message({
消息：“请输入您的密码”，
类型：“警告”
});
返回false
}否则{
request_POST(/login ，qs.stringify({
身份：this.username，
desStr: this.password，
loginType: 1，
登录角色：0
})).然后((res)={
if (res.data.code==200) {
localStorage.setItem(token ，RES . data . data[ JEE CMS-Auth-Token ])；
//登录成功
//window . open(this . API host uesr/resume ， _parent )
window . open(this . API host index/index ， _parent )
} else if (res.data.code==12462) {
这个。$message({
消息：“用户未注册”，
类型：“警告”
});
//跳转到注册页面
setTimeout(()={
window . open(this . API host user register/user register ，
_ self’)；
}, 1000)
} else if(RES . data . code==12468){//用户没有用户名和密码。
localStorage.setItem(token ，RES . data。data[ JEE CMS-Auth-Token ])；
窗户。打开(这个。API host uesr/enter account ， _ parent )；
} else if (res.data.code==604) { //用户无简历
localStorage.setItem(token ，RES . data。data[ JEE CMS-Auth-Token ])；
窗户。打开(这个。API主机 uesr/fill resume ， _ parent )；
} else if(RES . data。code==1077){//简历未通过审核
localStorage.setItem(token ，RES . data。data[ JEE CMS-Auth-Token ])；
窗户。打开(这个。API主机 uesr/fill resume ， _ parent )；
} else if(RES . data。code==1075){//简历审核中
localStorage.setItem(token ，RES . data。data[ JEE CMS-Auth-Token ])；
窗户。打开(这个。API主机 uesr/audit ， _ parent )；
}否则{
这个$消息。错误(参考数据。消息)；
}
})
}
}否则{
//验证码登录
if (this.phone==) {
这个消息({
消息： 请输入手机号，
类型："警告"
});
返回错误的
} else if(！(/^(13[0-9]14[5-9]15[012356789]16617[0-8]18[0-9]19[8-9])[0-9]{8}$/.测试（
this.phone))) {
这个消息({
消息： 请输入正确的手机号，
类型："警告"
});
返回错误的
} else if (this.code==) {
这个消息({
消息： 请输入验证码，
类型："警告"
});
返回错误的
}否则{
request_POST(/login ，qs.stringify({
身份：this.phone，
验证码：这个。代码，
loginType: 2，
登录角色：0
})).然后((res)={
if (res.data.code==200) {
localStorage.setItem(token ，RES . data。data[ JEE CMS-Auth-Token ])；
窗户。打开(这个。API主机 uesr/resume ， _ parent )；
} else if (res.data.code==12462) {
这个消息({
消息： 用户未注册，
类型："警告"
});
//跳转到注册页面
setTimeout(()={
窗户。打开(这个。API主机用户注册/用户注册，
_ self’)；
}, 1000)
} else if(RES . data。code==12468){//用户无用户名密码
localStorage.setItem(token ，RES . data。data[ JEE CMS-Auth-Token ])；
窗户。打开(这个。API host uesr/enter account ， _ parent )；
} else if (res.data.code==604) { //用户无简历
localStorage.setItem(token ，RES . data。data[ JEE CMS-Auth-Token ])；
窗户。打开(这个。API主机 uesr/fill resume ， _ parent )；
} else if(RES . data。code==1077){//简历未通过审核
localStorage.setItem(token ，RES . data。data[ JEE CMS-Auth-Token ])；
window . open(this . API host uesr/fill resume ， _ parent )；
} else if(RES . data . code==1075){//简历审阅中
localStorage.setItem(token ，RES . data . data[ JEE CMS-Auth-Token ])；
window . open(this . API host uesr/audit ， _ parent )；
}否则{
这个。$ message . error(RES . data . message)；
}
})
}
}
},
这就是这篇关于在vue中防止多次点击的实践的文章。要了解更多关于在vue中防止多次点击的信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。