vue中获取短信验证码

使用vue + vant 写的注册页面

<div class="registerForm">
      <van-cell-group>
        <van-field left-icon="phone-circle-o" maxlength="11" v-model="addForm.userPhone" placeholder="请输入手机号" />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="addForm.code"
          center
          clearable
          placeholder="请输入短信验证码"
          left-icon="phone-o"
          maxlength="4"
        >
        <van-button slot="button" size="small" type="primary" :disabled = "disabledBtn" @click="sendCode">{{text}}</van-button>
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <van-field left-icon="bag-o" type="password" clearable v-model="addForm.password" placeholder="请输入密码" />
      </van-cell-group>
      <van-cell-group>
        <van-field left-icon="bag-o" type="password" clearable v-model="addForm.confirmPassword" placeholder="请输入确认密码" @blur="confirmPassword" />
      </van-cell-group>
      <van-cell-group>
        <van-field left-icon="manager-o" clearable v-model="addForm.referrerId" placeholder="请输入推荐人ID" />
      </van-cell-group>
    </div>
    <van-button type="warning" class="registerBtn" @click="toRegister">注册</van-button>
  </div>

data() {
    return {
      addForm: {
        userPhone: '',
        password: '',
        code: '',
        confirmPassword: '',
        referrerId: '',
        type: 'addUser'
      },
      text: '发送验证码',
      timer: 60,
      disabledBtn: false,
      time: null
    }
  }

   // 获取倒计时
    getSecond(timer) {
      this.disabledBtn = true
      this.text = this.timer + 's后重新获取'
      this.timer--
      if (this.timer == 0) {
        clearInterval(this.time)
        this.text = '发送验证码'
        this.timer = this.timer
        this.disabledBtn = false
      }
    },
    // 发送短信
    async sendCode() {
      var reg = /^1[3456789]\d{9}$/
      var userPhone = reg.test(this.addForm.userPhone)
      if (userPhone) {
        const { data:res } = await this.$axios.post('/AppUser/sendOutCode', this.addForm)
        if (res.code !== 1) return this.$notify({ type: 'danger', message: res.resultMessage })
        this.time = setInterval(() => {
          this.getSecond(60)
        }, 1000)
      }
    },
    // 确认两次输入密码是否一致
    confirmPassword() {
      if (!(this.addForm.password == this.addForm.confirmPassword)) return this.$notify({ type: 'danger', message:'密码输入不一致' })
    }

使用定时器最好在beforeDestroy里清除一下

beforeDestroy() {
    this.time = null
  }