VUE+elementUI实现表单发送验证码倒计时方法

VUE+elementUI实现表单发送验证码倒计时方法

1.HTML代码部分

<el-form-item label="输入验证码" prop="verificationCode">
    <el-input v-model="accountSettingsForm.verificationCode" placeholder="请输入验证码" style="width: 84%"></el-input>
    <el-button icon="el-icon-mobile-phone" @click="send" style="width: 15%" type="success" :disabled="disabled=!show" >  
        <span v-show="show">获取验证码</span>
        <span v-show="!show" class="count">{{count}} s</span>
     </el-button>
</el-form-item>

2.js代码部分

const TIME_COUNT = 60; //更改倒计时时间
 data(){
      return {
        show: true,  // 初始启用按钮
        count: '',   // 初始化次数
        timer: null,
      }
    },

    methods:{
        send(){
            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)
              }
        }   
    }