一个60秒的倒计时

this.timer = setInterval(() => {
  this.time--;
  if (this.time === 0) {
    clearInterval(this.timer);
    this.isReset = true;
    this.time = 60;
  }
}, 1000);

下面分享一个验证码的弹框组件封装

1. 首位输入小数点后,自动补充小数点前一位为"0";
2. 小数点后大于两位不可输入;
3. 未输入小数点后两位当输入框失去光标时,自动增加后两位为"00"
4. 不可输入>2个的小数点;

<template>
  <div v-if="showCode">
    <div class="bg">
      <div class="box">
        <div class="title">请输入验证码</div>
        <div class="phone">已发送到手机{{ copyPhone }}</div>
        <div class="box-input">
          <input
            type="number"
            placeholder="请输入验证码"
            v-model="inputCode"
            @input="changeCode"
          />
        </div>
        <div class="warning" v-if="iswarn">验证码错误，请重新输入</div>
        <hr />
        <div class="box-time" v-if="!isReset">{{ time }}s后重新获取</div>
        <div class="box-reset" v-else @click="sendVerification">重新获取</div>
        <img
          class="box-close"
          @click="close"
          src="@/assets/images/balance-close.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    phone: {
      type: String,
      default() {
        return "";
      }
    },
    showCode: {
      type: Boolean,
      default() {
        return false;
      }
    },
    iswarn: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      copyPhone: "",
      time: 60,
      timer: "",
      isReset: false,
      inputCode: ""
    };
  },
  watch: {
    showCode(val) {
      if (val) {
        this.copyPhone =
          this.phone.substr(0, 3) + "****" + this.phone.substr(-4);
        this.daojishi();
      }
    }
  },
  methods: {
    close() {
      this.copyPhone = "";
      this.clearTime();
      this.$emit("update:showCode", false);
      this.$emit("update:iswarn", false);
    },
    clearTime() {
      clearInterval(this.timer);
      this.isReset = false;
      this.time = 60;
      this.inputCode = "";
    },
    sendVerification() {
      this.$emit("sendVerification");
      this.daojishi();
    },
    daojishi() {
      if (this.showCode) {
        this.isReset = false;
        this.timer = setInterval(() => {
          this.time--;
          if (this.time === 0) {
            clearInterval(this.timer);
            this.isReset = true;
            this.time = 60;
          }
        }, 1000);
      }
    },
    changeCode() {
      this.$emit("verifyCode", this.inputCode);
    }
  }
};
</script>

<style lang="stylus" scoped>
.bg {
  position fixed
  top 0
  left 0
  width 100%
  height 100vh
  background: rgba(0, 0, 0, 0.5);
}
.box {
  position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)
  background: #FFFFFF;
  border-radius: 8px;
}
.title {
  margin-top 23px
  text-align center
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}
.phone {
  font-size: 14px;
  color: #333333;
  text-align center
  margin-top 9px
}
.box-input {
  width: 240px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #EAEAEA;
  margin 17px 15px 0
  input {
    width 100%
    height 100%
    padding 0 13px
    background: #F5F5F5;
    font-size: 16px;
    color: #333333;
  }
}
.warning {
  margin 9px 0 9px 15px
  font-size: 14px;
  color: #FF4545;
}
hr {
  border none
  height 1px
  background: #E5E5E5;
  margin-top 17px
}
.box-time {
  height 48px
  line-height 48px
  font-size: 18px;
  color: #999999;
  text-align center
}
.box-reset {
  height 48px
  line-height 48px
  font-size: 18px;
  color: #658AF0;
  text-align center
}
.box-close {
  width 20px
  height 20px
  position absolute
  top 12px
  right 12px
}
</style>

使用

<template>
  <div>
    <div class="btn" @click="gointo" :class="!isInto ? 'gray' : ''">
      确认转入
    </div>
    
    <verificationCode
      :phone="phone"
      :showCode.sync="showCode"
      :iswarn.sync="iswarn"
      @sendVerification="sendVerification"
      @verifyCode="verifyCode"
    ></verificationCode>
  </div>
</template>

<script>
  components: {
    verificationCode
  },
  data() {
    return {
      phone: "",
      showCode: false,
      inputCode: "",
      iswarn: false,
    };
  },
  methods: {
    sendVerification() {
      console.log("发送验证码");
    },
    verifyCode(val) {
      this.inputCode = val;
      console.log("验证码:", this.inputCode);
      if (this.inputCode.length == 6) {
        // console.log("验证验证码");
        if (this.inputCode != "123456") {
          this.iswarn = true;
        } else {
          this.$router.push({
            path: "/withdrawIntoResult",
            query: {
              type: 1
            }
          });
        }
      }
    },
    changetopNav(val) {
      this.topNav = val;
    },
    inputMoney() {
      this.clearNoNum(this.money);
      if (this.money > this.imprestMoney) {
        this.moneylittle = true;
        this.isInto = false;
      } else {
        this.moneylittle = false;
        this.isInto = true;
        if (this.money < 0.01) {
          this.isInto = false;
        }
      }
    },
    clearNoNum(val) {
      if (val == ".") {
        val = "0.";
      }
      val = val.replace(/[^\d.]/g, "");
      //必须保证第一个为数字而不是.
      val = val.replace(/^\./g, "");
      //保证只有出现一个.而没有多个.
      val = val.replace(/\.{2,}/g, ".");
      //保证.只出现一次，而不能出现两次以上
      val = val
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      //只能输入两位小数
      val = val.replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
      // val = val.replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
      if (val.indexOf(".") < 0 && val != "") {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        val = parseFloat(val);
      }
      this.money = val;
    },
    changMoney() {
      this.money = this.imprestMoney;
      this.inputMoney();
    },
    blurMoney() {
      if (this.money > 0) {
        var s = this.money.toString();
        var rs = s.indexOf(".");
        if (rs < 0) {
          rs = s.length;
          s += ".";
        }
        while (s.length <= rs + 2) {
          s += "0";
        }
        this.money = s;
      }
    },
    gointo() {
      if (!this.isInto) {
        return;
      }
      this.showCode = true;
      this.phone = "15723849387";
      console.log("ok");
    }
  }
</script>