vue獲取驗證碼

1.html代碼

<Input  v-model="formItem.mobile" clearable placeholder="請輸入您的手機號..."></Input>

<Input  style="width:160px" clearable v-model="formItem.verify" placeholder="請輸入驗證碼"></Input>

<Button type="ghost" @click="showYz">獲取驗證碼</Button>

<Modal v-model="modalshow" width="360" loading @on-ok="del">
　　<div class="code" @click="refreshCode">
　　　　<s-identify :identifyCode="identifyCode"></s-identify>
　　</div>
　　<div>
　　　　<Input icon="" clearable v-model="paras.verify" placeholder="請輸入驗證碼..."></Input>
　　</div>
　　<div slot="footer">
　　　　<Button type="primary" size="large" @click="del">確定</Button>
　　</div>
</Modal>

 

2.methods代碼

methods：{
　　showYz（）{
　　　　var re=/^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/; //正則判斷手機號格式是否正確
　　　　if (re.test(this.formItem.mobile)) {
　　　　　　this.paras.verify = "";
　　　　　　this.modalshow = true; //顯示彈窗  7 　　　　　　this.identifyCode = "";
　　　　　　this.makeCode(this.identifyCodes, 6);
　　　　}else {
　　　　　　this.$Message.warning("請輸入正確的手機號");
　　　　}
　　},
　　/******驗證圖片********** */
　　randomNum(min, max) {
　　　　return Math.floor(Math.random() * (max - min) + min);
　　},
　　refreshCode() {
　　　　this.identifyCode = "";
　　　　this.makeCode(this.identifyCodes, 6);
　　},
　　makeCode(o, l) {
　　　　for (let i = 0; i < l; i++) {
　　　　　　this.identifyCode += this.identifyCodes[
　　　　　　　　this.randomNum(0, this.identifyCodes.length)
　　　　　　];
　　　　}
　　},
}

3.mounted代碼

mounted:{
　　this.makeCode(this.identifyCodes, 6);
}