element ui 短信登录倒计时60秒

2020-06-24  本文已影响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>
上一篇 下一篇

猜你喜欢

热点阅读