vue按钮定时器

A仔979

已于 2022-05-14 20:48:27 修改

阅读量497

点赞数 1

分类专栏： vue组件文章标签： vue.js elementui javascript

于 2022-05-14 20:41:45 首次发布

本文链接：https://blog.csdn.net/qq_62336448/article/details/124773661

版权

vue组件专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html

<el-button :disabled="disableBtn" @click="sendEmail" 
style="float:right;margin-top:3px;" type="success" size="mini">
{{emailBtnName}}
</el-button>

js


data(){
    return{
        emailBtnName: '获得验证码',
        disableBtn: false,
        btnTime: 0,
        circulationTimer: ''
    }
}


methods:{
        timerBtn(){
            if(this.btnTime>0){//进入倒计时
                this.btnTime--;
                this.emailBtnName = this.btnTime+'秒后重试！';
                this.circulationTimer = setTimeout(this.timerBtn,1000)
            }else{
                this.btnTime = 0;
                this.emailBtnName = '获得验证码'
                this.disableBtn = false
                clearTimeout(this.circulationTimer)
            }
        },
        sendEmail(){
            var verify = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
            if(this.registerName == ''){//验证邮箱
                    this.$message.warning('请输入邮箱！')
            }else if(!verify.test(this.registerName)){//验证邮箱格式是否正确
                this.$message.error('邮箱格式错误！')
            }else{//通过验证的邮箱
                this.disableBtn = true
                this.btnTime = 60
                this.timerBtn()
                //这里可以开始调用后台接口了
                alert('可以调后台接口了')
            }
        }
    }