文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue 防止多次点击的实践

2024-04-02 19:55

关注

一般点击事件会分不同的情况进行消息提醒,如果不做处理,短短几秒弹出很多条提示信息,就会很烦,比如:

那要怎么控制这个提示信息只能出现单条呢

再点击事件的方法最前面加上

定义变量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 防止多次点击内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯