vue 中添加手机验证码组件

写在前面： 今天要实现的功能是在 完善个人信息页面（vue）中添加手机验证码组件，当用户点击 手机选项时，弹出获取验证码组件，完成验证手机的功能：

这里考虑到功能的复用，我把当前弹出手机验证码的操作放在了单独的组件中：

 1 <template > 2  <div> 3   <div class="bind-phone-box"> 4    <div class="phone-title">绑定手机</div> 5    <div class="phone-content" v-on:click.stop="fillContent"> 6     <input v-model="phoneNum" class="phone-num" type="text" placeholder="请输入手机号码"> 7     <div class="verify-box clearfix"> 8      <input class="verify-num" v-model="verifyNum" type="text" placeholder="请输入验证码"><input v-on:click="sendSmsCode" class="verify-btn" type="button" v-model="btnContent" v-bind="{'disabled':disabled}"> 9     </div>10    </div>11    <div class="phone-submit clearfix">12     <input class="submit-cancel" type="button" value="取消">13     <input class="submit-confirm" v-on:click.stop="verificationCode" type="button" value="确定">14    </div>15   </div>16  </div>17 </template>

并把当前组件放在需要使用它的组件中，这里需要注意的是，在控制 绑定手机组件的显示和隐藏的时候，出现了一个小问题：点击 “手机” 按钮需要显示当前组件，但什么时候去隐藏当前的组件呢，我是这样想的：

　　情况1：用户已经输完了手机号并通过了验证，点击"确定"按钮的时候需要隐藏当前组件；

　　情况2：用户没有完成手机验证，但又不想继续，点击当前手机的任意位置（除去“确定”按钮、手机号输入框和 验证码输入框）都应该隐藏当前组件；

基于这两种情况，我在父组件中给子组件添加了一个容器：

1  <li class="mui-table-view-cell phone-li">2  　　<span v-on:click="verifyPhone" class="mui-navigate-right"><span>手机号<span class="necessary">*</span></span></span>3 　　 <!-- 手机验证码 -->4   <div class="shade" v-show="verifyShow" v-on:click="verifyPhone">5    <!-- 手机验证码子组件 -->6    <phoneVerify></phoneVerify>7   </div>8　　 </li>

通过控制 父div 的显示状态来控制子组件的显示状态，

1  methods:{2  // 手机号验证3   verifyPhone(){4   this.verifyShow=!this.verifyShow;5   },6 },

在验证组件中的逻辑控制如下：

 1 <script> 2  // 引入弹窗组件 3  import { Toast } from 'mint-ui'; 4  export default { 5   data(){ 6    return { 7     phoneNum:"", //手机号 8     verifyNum:"", //验证码 9     btnContent:"获取验证码", //获取验证码按钮内文字10     time:0, //发送验证码间隔时间11     disabled:false //按钮状态12    }13   },14   created(){15 16   },17   methods:{18    // 获取验证码19    sendSmsCode(){20     var reg=11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;//手机号正则验证21     var phoneNum = this.phoneNum;22     if(!phoneNum){//未输入手机号23      Toast("请输入手机号码");24      return;25     }26     if(!reg.test(phoneNum)){//手机号不合法27      Toast("您输入的手机号码不合法，请重新输入");28     }29     this.time = 60;30     this.timer();31 32     // 获取验证码请求33     var url = 'http://bosstan.asuscomm.com/api/common/sendSmsCode';34     this.$http.post(url,{username:phoneNum},{emulateJSON:true}).then((response)=>{35      console.log(response.body);36     });37 38    },39    timer(){40     if(this.time>0){41      this.time--;42      this.btnContent = this.time+"s后重新获取";43      this.disabled = true;44      var timer = setTimeout(this.timer,1000);45     }else if(this.time == 0){46      this.btnContent = "获取验证码";47      clearTimeout(timer);48      this.disabled = false;49     }50    },51    // 验证验证码52    verificationCode(){53     var phoneNum = this.phoneNum;//手机号54     var verifyNum = this.verifyNum;//验证码55 56     var url = 'http://bosstan.asuscomm.com/api/common/verificationCode';57     this.$http.post(url,{58      username:phoneNum,59      code:verifyNum60     },{61      emulateJSON:true62     }).then((response)=>{63      console.log(response.body);64     });65    },66    fillContent(){67     // console.log("fillContent");68    }69   }70  }71 </script>

其中，获取验证码和验证短信验证码的逻辑还没有写入

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：vue 中添加手机验证码组件

关键词：VUE