vue 60s倒计时按钮

原创于 2021-05-22 19:12:34 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Vue组件中实现一个60秒倒计时的按钮功能，该按钮用于获取手机验证码。当点击按钮时，会触发网络请求并启动倒计时，期间按钮变为禁用状态，倒计时结束后恢复原状。

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

vue 60s倒计时按钮

  <!-- 手机号 -->
    <InputGroup type="number" 
    v-model="phone" 
    placeholder="手机号"
    :btnTitle="btnTitle" 
    :disabled="disabled" 
    :error="errors.phone"
    @btnClick="getVerifyCode"/>


export default {
  name: 'Login',
  data() {
    return {
        phone:"",
        verifyCode:"",
        errors:{},
        btnTitle:"获取验证码",
        disabled:false

    }
  },
  methods: {
      getVerifyCode() {
          if(this.validatePhone()){
              // 发送网络请求
            this.validateBtn();
          }
      },

      validateBtn() {
       let time = 60;
       let timer = setInterval(() => {
           if(time == 0) {
               clearInterval(timer);
               this.btnTitle = "获取验证码";
               this.disabled = false;
           }else{
               //倒计时
               this.btnTitle = time + "s";
               this.disabled = true;
               time--;
           }
       },1000)
      },