Vue验证码60秒倒计时

template

<template>
  <div class='login'>
    <div class="loginHeader">
      <input type="tel" class="loginBtn border-bottom" placeholder="请输入手机号" />
      <input type="tel" class="codeBtn" placeholder="请输入验证码" />
      <input type="button" class="getNumber" v-model="codeMsg" @click="getCode" :disabled="codeDisabled" />
    </div>
  </div>
</template>

---

script

<script>
  export default {
    data() {
      return {
        // 是否禁用按钮
        codeDisabled: false,
        // 倒计时秒数
        countdown: 60,
        // 按钮上的文字
        codeMsg: '获取验证码',
        // 定时器
        timer: null
      }
    },

    methods: {
      // 获取验证码
      getCode() {
        // 验证码60秒倒计时
        if (!this.timer) {
          this.timer = setInterval(() => {
            if (this.countdown > 0 && this.countdown <= 60) {
              this.countdown--;
              if (this.countdown !== 0) {
                this.codeMsg = "重新发送(" + this.countdown + ")";
              } else {
                clearInterval(this.timer);
                this.codeMsg = "获取验证码";
                this.countdown = 60;
                this.timer = null;
                this.codeDisabled = false;
              }
            }
          }, 1000)
        }
      }
    }
  }
</script>

---

css（scss写法）

<style>
.login{
  width: 100%;
  height: 100%;
  background: #F9F9F9;
  .loginHeader{
    padding: 0 10px;
    background: #fff;
    margin-top: 20px;
    overflow: hidden;
    .loginBtn{
      width: 100%;
      height: 42px;
      border: none;
      background: #fff;
      color: #444;
      border-radius: 4px;
      outline: none;
      padding-left: 3px;
      font-size: 1.4rem;
      box-sizing: border-box;
      -webkit-appearance:none;
    }
    .border-bottom{
      border-bottom: 1px solid #F3F3F3;
    }
    .codeBtn{
      width: 63%;
      height: 42px;
      border: none;
      background: #fff;
      color: #444;
      border-radius: 4px;
      float: left;
      outline: none;
      padding-left: 3px;
      font-size: 1.4rem;
      box-sizing: border-box;
      -webkit-appearance:none;
    }
    .getNumber{
      width: 35%;
      height: 36px;
      float: right;
      margin-top: 3px;
      border: 1px solid #09BB07;
      color: #09BB07;
      background: #fff;
      border-radius: 4px;
      outline: none;
      -webkit-appearance:none;
    }
  }
}
</style>