<group class="shadow" gutter="0"><x-input v-model="mobileCaptcha" placeholder="請輸入手機驗證碼" class="weui-vcode" keyboard="number" :max="6"></x-input><button @click="sendMessage" class="btn" ref="color">{{word}}</button></group> // 1.1 非空判斷sendMessage() {if (!this.phoneNo) {this.$vux.toast.text("請輸入手機號碼");return false;}// if (!this.captcha) {// this.$vux.toast.text("請輸入圖片驗證碼")// return false;// }if (this.isOvertime) {this.$vux.toast.text("別急，正在發送中");return false;}this.sms();},// 2.短信驗證碼請求sms() {new Promise((resolve, reject) => {Api_auth.sms(this.captcha, this.phoneNo).then(response => {this.$vux.toast.text("短信已發送");// this.$refs.color.style.backgroundColor = "#2e82d8";let that = this,time = 60;var sendTimer = setInterval(function() {that.isOvertime = true;time--;that.word = time + " 后重新發送";if (time < 0) {that.isOvertime = false;clearInterval(sendTimer);that.word = "獲取驗證碼";// that.$refs.color.style.backgroundColor = "#EF7E00";}}, 1000);}).catch(error => {this.$vux.toast.text(error);reject(error);});});},

總結

以上是生活随笔為你收集整理的前端设置，验证码登录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。