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'


阅读更多
个人分类: vue(2)
上一篇vue(vux table表格)
下一篇vue(echarts引入)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭