美文网首页
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