<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'