vue (验证码,基于vux)

<div class='serviceCode'>
  <x-input  ref="accesCodes" type="number" title="手机验证码" placeholder="请输入验证码"  v-model="accesCode" ></x-input>
  <button>
    <span v-show="sendAuthCode" class="auth_text auth_text_blue"  @click="getAuthCode" style='cursor:pointer'>获取验证码(120)</span>
    <span v-show="!sendAuthCode" class="auth_text" style='cursor:pointer'> <span class="auth_text_blue" style='cursor:pointer'>{{auth_time}} </span> 秒之重新发送验证码</span>
  </button>
</div>

  //验证码计时器
getAuthCode() {
  this.sendAuthCode = false;
  this.auth_time = 120;
  this.auth_timetimer =  setInterval(()=>{
      this.auth_time--;
  if(this.auth_time<=0){
    this.sendAuthCode = true;
    clearInterval(this.auth_timetimer);
  }
  }, 1000);
},

data () {
  return {
  
    sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
    auth_time: 120, /*倒计时 计数器*/
   
    auth_timetimer:''
  }
},

import { XInput} from 'vux'