vue+elementUI 发送手机验证码button倒计时禁用

最新推荐文章于 2025-05-28 21:34:11 发布

原创最新推荐文章于 2025-05-28 21:34:11 发布 · 3.4k 阅读

14 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue.js项目中结合ElementUI库，实现发送手机验证码后的按钮禁用并启动倒计时功能。详细讨论了相关组件的使用和JavaScript逻辑，帮助开发者创建更友好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按钮标签：

<el-button
    type="primary"
    @click="getVerify"
    style="width:175px;"
    :disabled="disabled=!show"
>
<span v-show="show">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span>
</el-button>

script：

<script>
export default {
    data() {
        return {
            show: true,
            count: "", // 初始化次数
            timer: null
         }
    },
    methods: {
        getVerify() {
            // 验证手机号
            if (this.checkPhone() == false) {
                return false;
            } else {
                const TIME_COUNT = 60; //更改倒计时时间
                if (!this.timer) {
                    this.count = TIME_COUNT;
                    this.show = false;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= TIME_COUNT) {
                            this.count--;
                        } else {
                            this.show = true;
                            clearInterval(this.timer); // 清除定时器
                            this.timer = null;
                        }
                    }, 1000);
                }
            }
        },
        checkPhone() {
            let phone = this.form.phone;
            if (!/^1[3456789]\d{9}$/.test(phone)) {
                this.$message.error("请填写正确的手机号");
                return false;
            }
        }
    }
}
</script>