美文网首页
element ui 短信登录倒计时60秒

element ui 短信登录倒计时60秒

作者: 椰果粒 | 来源:发表于2020-06-24 17:32 被阅读0次

    直接上代码

    <script>
    export default {
        data() {
            return {
                isDisabled: false,
                count: '',
                timer: null,
            };
        },
        methods: {
            // 这里就是不分字段验证+倒计时60秒
            getVerificationCode() {
                this.$refs.loginMobileForm.validateField(["mobile"], errMsg => {
                    if (errMsg) {
                         return false;
                    } else {
                        // 这里请求获取短信验证码的接口
                        request({
                          
                        }).then(res => { 
                            this.$message({
                                message: "短信验证码已发送,请查收!",
                                type: "success"
                            })
                            this.countDown()
                        })
                    }
                });
            },
            countDown() {
                const TIME_COUNT = 60
                if (!this.timer) {
                    this.count = TIME_COUNT
                    this.isDisabled = true
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--
                        } else {
                            this.isDisabled = false
                            clearInterval(this.timer)
                            this.timer = null
                        }
                    }, 1000)
                } 
            }
        },
    };
    </script>
    

    相关文章

      网友评论

          本文标题:element ui 短信登录倒计时60秒

          本文链接:https://www.haomeiwen.com/subject/uvfdfktx.html