技術標籤：vuejsweb

在template中加

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

給 data 裡面加上

show: true,
timer: 0,
count: 0
 

methods 裡面加

// 獲取簡訊驗證碼
      getShortMessageCode() {      
       //axios請求
       // console.log(this.form.phone);
        console.log(1111111111111)
        console.log(!this.timer)
        // 驗證碼倒計時
        if (!this.timer) {
          console.log(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);
        }
      }

style 裡面

/* 簡訊驗證碼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;
  }