element ui 短信登錄倒計時60秒

直接上代碼

<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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章