Vue中添加手机验证码组件功能操作方法

什么是组件：

组件是vue.js最强大的功能之一。组件可以扩展html元素，封装可重用的代码。在较高层面上，组件是自定义的元素，vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生html元素的形式，以is特性扩展。

写在前面：

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

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

<template >
 <div>
  <div class="bind-phone-box">
   <div class="phone-title">绑定手机</div>
   <div class="phone-content" v-on:click.stop="fillcontent">
    <input v-model="phonenum" class="phone-num" type="text" placeholder="请输入手机号码">
    <div class="verify-box clearfix">
     <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}">
    </div>
   </div>
   <div class="phone-submit clearfix">
    <input class="submit-cancel" type="button" value="取消">
    <input class="submit-confirm" v-on:click.stop="verificationcode" type="button" value="确定">
   </div>
  </div>
 </div>
</template>

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

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

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

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

<li class="mui-table-view-cell phone-li">
 　　<span v-on:click="verifyphone" class="mui-navigate-right"><span>手机号<span class="necessary">*</span></span></span>
 　　 <!-- 手机验证码 -->
  <div class="shade" v-show="verifyshow" v-on:click="verifyphone">
    <!-- 手机验证码子组件 -->
    <phoneverify></phoneverify>
   </div>
　 </li>

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

methods:{
  // 手机号验证
  verifyphone(){
   this.verifyshow=!this.verifyshow;
  },
 },

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

<script>
 // 引入弹窗组件
 import { toast } from 'mint-ui';
 export default {
  data(){
   return {
    phonenum:"", //手机号
    verifynum:"", //验证码
    btncontent:"获取验证码", //获取验证码按钮内文字
    time:0, //发送验证码间隔时间
    disabled:false //按钮状态
   }
  },
  created(){
  },
  methods:{
   // 获取验证码
   sendsmscode(){
    var reg=11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;//手机号正则验证
    var phonenum = this.phonenum;
    if(!phonenum){//未输入手机号
     toast("请输入手机号码");
     return;
    }
    if(!reg.test(phonenum)){//手机号不合法
     toast("您输入的手机号码不合法，请重新输入");
    }
    this.time = 60;
    this.timer();
    // 获取验证码请求
    var url = 'http://bosstan.asuscomm.com/api/common/sendsmscode';
    this.$http.post(url,{username:phonenum},{emulatejson:true}).then((response)=>{
     console.log(response.body);
    });
   },
   timer(){
    if(this.time>0){
     this.time--;
     this.btncontent = this.time+"s后重新获取";
     this.disabled = true;
     var timer = settimeout(this.timer,1000);
    }else if(this.time == 0){
     this.btncontent = "获取验证码";
     cleartimeout(timer);
     this.disabled = false;
    }
   },
   // 验证验证码
   verificationcode(){
    var phonenum = this.phonenum;//手机号
    var verifynum = this.verifynum;//验证码
    var url = 'http://bosstan.asuscomm.com/api/common/verificationcode';
    this.$http.post(url,{
     username:phonenum,
     code:verifynum
    },{
     emulatejson:true
    }).then((response)=>{
     console.log(response.body);
    });
   },
   fillcontent(){
    // console.log("fillcontent");
   }
  }
 }
</script>

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

ps：下面给大家补充一段vue短信验证码组件实例代码：

vue.component('timerbtn',{
  template: '<button v-on:click="run" :disabled="disabled || time > 0">{{ text }}</button>',
  props: {
    second: {
      type: number,
      default: 60
    },
    disabled: {
      type: boolean,
      default: false
    }
  },
  data:function () {
    return {
      time: 0
    }
  },
  methods: {
    run: function () {
      this.$emit('run');
    },
    start: function(){
      this.time = this.second;
      this.timer();
    },
    stop: function(){
      this.time = 0;
      this.disabled = false;
    },
    setdisabled: function(val){
      this.disabled = val;
    },
    timer: function () {
      if (this.time > 0) {
        this.time--;
        settimeout(this.timer, 1000);
      }else{
        this.disabled = false;
      }
    }
  },
  computed: {
    text: function () {
      return this.time > 0 ? this.time + 's 后重获取' : '获取验证码';
    }
  }
});

<timer-btn ref="timerbtn" class="btn btn-default" v-on:run="sendcode" ></timer-btn>

var vm = new vue({
  el:'#app',
  methods:{
    sendcode:function(){
      vm.$refs.timerbtn.setdisabled(true); //设置按钮不可用
      hz.ajaxrequest("sys/sendcode?_"+$.now(),function(data){
        if(data.status){
          vm.$refs.timerbtn.start(); //启动倒计时
        }else{
          vm.$refs.timerbtn.stop(); //停止倒计时
        }
      });
    },
  }
});

总结

以上所述是小编给大家介绍的vue中添加手机验证码组件功能操作方法，希望对大家有所帮助