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
How to export mysql query results to csv
To export MySQL query results to csv , you usuall...
Use Xshell to connect to the Linux virtual machine on VMware (graphic steps)
Preface: I recently started to study the construc...
Detailed explanation of Linx awk introductory tutorial
Awk is an application for processing text files, ...
Detailed code of the example of downloading the docker installation package from yum and installing it on an offline machine
1. On a networked machine, use the default centos...
Complete steps for using Nginx+Tomcat for load balancing under Windows
Preface Today, Prince will talk to you about the ...
Vue echarts realizes horizontal bar chart
This article shares the specific code of vue echa...
How to declare a cursor in mysql
How to declare a cursor in mysql: 1. Declare vari...
How to implement vue page jump
1. this.$router.push() 1. Vue <template> &l...
Linux kernel device driver character device driver notes
/******************** * Character device driver**...
In-depth analysis of MySQL from deleting the database to running away_Advanced (I) - Data Integrity
1. Introduction to Data Integrity 1. Introduction...
Summary of methods for inserting videos into HTML pages
Now if you want to use the video tag in a page, y...
Introduction to MySQL Connection Control Plugin
Table of contents 1. Introduction to the connecti...
Basic operation tutorial of files and permissions in centos
Preface Before we begin, we should briefly unders...
Introduction to Sublime Text 2, a web front-end tool
Sublime Text 2 is a lightweight, simple, efficien...