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 防止多次点击的实践的文章就介绍到这了,更多相关vue 防止多次点击内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了WebStorm无法正确识别Vue3组合式API的解决方案,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-02-18