Vue practice of preventing multiple clicks
|
Generally, click events will be divided into different situations for message reminders. If they are not handled, many prompt messages will pop up in just a few seconds, which will be very annoying, for example:
How can I control this prompt message to only appear once? Then add the click event method at the front Define the variable hasRemind to control whether to execute the corresponding operation in the click event When the user clicks for the first time, hasRemind = false. At this time, the second if statement is entered, and the value of hasRemind is changed to true. After 3 seconds, the value of hasRemind is changed to false again. In this case, the user can enter all the processes in the click event normally. When the user clicks for the second time, hasRemind=true, and the click event is directly exited. The series of processes in the click method can only be continued when the value of hasRemind is false. //By default, the click event that can trigger login hasRemind:false,
//Prevent multiple consecutive clicks let vm = this;
if(this.hasRemind === true) return;
if (this.hasRemind === false) {
this.hasRemind = true;
setTimeout(function(){
vm.hasRemind = false;
},3000)
}(Here, the above code snippet is placed in the login click event to prevent the user from clicking this multiple times and causing multiple prompt messages to appear.)
// "Personal login click event"
registerBtn() {
//Prevent multiple consecutive clicks 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) {
//Account and password login if (this.username == "") {
this.$message({
message: 'Please enter your account number',
type: 'warning'
});
return false;
}
else if (this.password == "") {
this.$message({
message: 'Please enter your password',
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"]);
//Login successful// window.open(this.apiHost + 'uesr/resume', '_parent')
window.open(this.apiHost + 'index/index', '_parent')
} else if (res.data.code == 12462) {
this.$message({
message: 'User not registered',
type: 'warning'
});
// Jump to the registration page setTimeout(() => {
window.open(this.apiHost + 'userregister/userregister',
'_self');
}, 1000)
} else if (res.data.code == 12468) { //User has no username and password localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
window.open(this.apiHost + 'uesr/enterAccount', '_parent');
} else if (res.data.code == 604) { //User has no resume localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
window.open(this.apiHost + 'uesr/fillresume', '_parent');
} else if (res.data.code == 1077) { //The resume failed to pass the review localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
window.open(this.apiHost + 'uesr/fillresume', '_parent');
} else if (res.data.code == 1075) { //Resume review in progress localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
window.open(this.apiHost + 'uesr/audit', '_parent');
} else {
this.$message.error(res.data.message);
}
})
}
} else {
//Verification code loginif (this.phone == "") {
this.$message({
message: 'Please enter your phone number',
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: 'Please enter a valid phone number',
type: 'warning'
});
return false;
} else if (this.code == "") {
this.$message({
message: 'Please enter the verification code',
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: 'User not registered',
type: 'warning'
});
// Jump to the registration page setTimeout(() => {
window.open(this.apiHost + 'userregister/userregister',
'_self');
}, 1000)
} else if (res.data.code == 12468) { //User has no username and password localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
window.open(this.apiHost + 'uesr/enterAccount', '_parent');
} else if (res.data.code == 604) { //User has no resume localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
window.open(this.apiHost + 'uesr/fillresume', '_parent');
} else if (res.data.code == 1077) { //The resume failed to pass the review localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
window.open(this.apiHost + 'uesr/fillresume', '_parent');
} else if (res.data.code == 1075) { //Resume review in progress localStorage.setItem("token", res.data.data["JEECMS-Auth-Token"]);
window.open(this.apiHost + 'uesr/audit', '_parent');
} else {
this.$message.error(res.data.message);
}
})
}
}
},This is the end of this article about the practice of preventing multiple clicks in Vue. For more relevant content about preventing multiple clicks in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: MySQL 5.7.27 installation and configuration method graphic tutorial
>>: Win32 MySQL 5.7.27 installation and configuration method graphic tutorial
Recommend
Detailed explanation of data sharing between Vue components
Table of contents 1. In project development, the ...
Textarea tag in HTML
<textarea></textarea> is used to crea...
Detailed explanation of vue page state persistence
Table of contents Code: Replenish: Summarize Requ...
Detailed tutorial on installing Hbase 2.3.5 on Vmware + Ubuntu18.04
Preface The previous article installed Hadoop, an...
Briefly describe mysql monitoring group replication
Original text: https://dev.mysql.com/doc/refman/8...
VMware installation of CentOS virtual machine and configuration network graphic tutorial
1. Download the CentOS image 1.1 Download website...
Detailed usage of React.Children
Table of contents 1. React.Children.map 2. React....
Implementation example of react project from new creation to deployment
Start a new project This article mainly records t...
JavaScript timer to achieve limited time flash sale function
This article shares the specific code of JavaScri...
Detailed discussion of memory and variable storage in JS
Table of contents Preface JS Magic Number Storing...
How to quickly install Nginx in Linux
Table of contents What is nginx 1. Download the r...
Docker dynamically exposes ports to containers
View the IP address of the Container docker inspe...
Detailed explanation of importing/exporting MySQL data in Docker container
Preface We all know that the import and export of...
Detailed explanation of the pitfalls of MySQL 8.0
I updated MySQL 8.0 today. The first problem: Nav...
How to build a DHCP server in Linux
Table of contents 1. Basic knowledge: 2. DHCP ser...