Vue 获取短信验证 倒计时功能

<div class="login-tel">
        <input
          type="text"
          v-model="userTel"
          placeholder="请输入手机号"
          pattern="[0-9]*"
        />
</div>
<div class="login-code">
        <input
          type="text"
          placeholder="请输入验证码"
          v-model="userCode"
          pattern="[0-9]*"
        />
        <button :disabled="disabled" @click="sendCode()">{{ codeMsg }}</button>
</div>
<div class="login-btn" @click="login()">登录</div>

import { Toast } from "mint-ui";
import http from "@/common/api/request.js";

 data() {
    return {
      disabled: false, //默认是false,为true时候被禁用就不能点了
      codeNum: 60,
      codeMsg: "获取短信验证码",
      userTel: "", //用户输入的手机号
      userCode: "", //用户输入的验证码
      code: "", //sdk验证码
      //验证规则是个对象
      rules: {
        //手机号验证 key
        userTel: {
          rule: /^1[23456789]\d{9}$/,
          msg: "手机号不能为空，并且是11位数字",
        },
      },
    };
  },
  methods: {
    //点击获取短信验证码按钮
    sendCode() {
      //把手机号/密码的字符串作为实参
      if (!this.validate("userTel")) return; //如果函数返回false 则用return来终止login函数
      //请求短信验证码接口
      http
        .$axios({
          url: "/api/code",
          method: "POST",
          data: {
            phone: this.userTel,
          },
        })
        .then((res) => {
          if (res.success) {
            //res.data就是验证码
            this.code = res.data;
          }
        });
      //如果通过正则 则继续，禁用按钮
      this.disabled = true;
      //倒计时
      let timer = setInterval(() => {
        --this.codeNum;
        this.codeMsg = `重新发送${this.codeNum}`;
      }, 1000);
      //判断什么时候停止定时器 使按钮恢复为可用状态
      setTimeout(() => {
        clearInterval(timer);
        this.codeNum = 6;
        this.disabled = false;
        this.codeMsg = "获取短信验证码";
      }, 60000);
    },
    //验证信息提示
    validate(key) {
      let bool = true;
      //key是“userTel”或者“userPwd”
      if (!this.rules[key].rule.test(this[key])) {
        //如果不匹配 则提示信息
        Toast(this.rules[key].msg);
        bool = false;
        return false; //如果不匹配正则 终止函数 并且返回false
      }
      return bool; //如果匹配正则 就没进入以上条件 返回true
    },
    //点击登录 将用户输入验证码和通过sdk发送的this.code做对比
    login() {
       //判断验证码是否正确
       if (this.code != this.userCode){
            Toast("验证码不正确");
            return;
        }
       //用户输入的短信验证码是对的 则发送请求
       if (this.code == this.userCode) {
        http
          .$axios({
            url: "/api/addUser",
            method: "POST",
            data: {
              phone: this.userTel,
            },
          })
          .then((res) => {
            if (!res.success) return;
            console.log(res);
          });
      }
    },
  },