23、vue實現獲取短信驗證碼

1、html頁面：

            <el-form-item  prop="phoneCode" class="pr">
              <el-input placeholder="短信驗證碼"  v-model="form.phoneCode"></el-input>
              <button @click.prevent="getCode()"  class="code-btn" :disabled="!show">
                  <span v-show="show">獲取驗證碼</span>
                  <span v-show="!show" class="count">{{count}} s</span>
              </button>
            </el-form-item>

/* 短信驗證碼css */

.pr {

position: relative;

}

.code-btn {

width: 100px;

height: 20px;

position: absolute;

top: 10px;

right: 5px;

z-index: 222;

color: #ef8466;

font-size: 14px;

border: none;

border-left: 1px solid #bababa;

padding-left: 10px;

background-color: #fff;

cursor: pointer;

}

2、編寫方法：

    // 獲取短信驗證碼
    getCode() {
       //axios請求
      console.log(this.form.phone);
      // 驗證碼倒計時
      if (!this.timer) {
        this.count = 60;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    }

 效果圖：