image.png

<el-col :span="16"><el-input placeholder="請輸入手機號碼" v-model="innerVisibleForm2.PhoneNum2"></el-input></el-col>
<el-col :span="16" v-show="verShow"><el-button @click="GetCode()" type="primary">獲取驗證碼</el-button></el-col>
<el-col :span="16" v-show="!verShow"><el-button disabled type="info"><span>{{timer}}</span>秒后重新獲取</el-button></el-col>

data () {
    verShow: true, // 判斷顯示那個按鈕
    timer: 60, // 短信驗證碼倒計時
}

this.innerVisibleForm2.PhoneNum2是input內(nèi)容

methods: {
    GetCode () {
      const regEmali = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regEmali.test(this.innerVisibleForm2.PhoneNum2)) {
        this.verShow = false
        const authTimer = setInterval(() => {
          this.timer--
          if (this.timer <= 0) {
            this.verShow = true
            this.timer = 60
            clearInterval(authTimer)
          }
        }, 1000)
      } else {
        this.$message.error('請輸入合法手機')
      }
    },
}