快捷導(dǎo)航

Vue中添加手機(jī)驗(yàn)證碼組件功能操作方法

更新時(shí)間：2017年12月07日 08:40:50 作者：小黑LEI

組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。這篇文章主要介紹了VUE 中添加手機(jī)驗(yàn)證碼組件,需要的朋友可以參考下

什么是組件：

組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴(kuò)展。

寫在前面：

今天要實(shí)現(xiàn)的功能是在完善個(gè)人信息頁(yè)面（vue）中添加手機(jī)驗(yàn)證碼組件，當(dāng)用戶點(diǎn)擊手機(jī)選項(xiàng)時(shí)，彈出獲取驗(yàn)證碼組件，完成驗(yàn)證手機(jī)的功能：

這里考慮到功能的復(fù)用，我把當(dāng)前彈出手機(jī)驗(yàn)證碼的操作放在了單獨(dú)的組件中：

<template >
 <div>
  <div class="bind-phone-box">
   <div class="phone-title">綁定手機(jī)</div>
   <div class="phone-content" v-on:click.stop="fillContent">
    <input v-model="phoneNum" class="phone-num" type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)碼">
    <div class="verify-box clearfix">
     <input class="verify-num" v-model="verifyNum" type="text" placeholder="請(qǐng)輸入驗(yàn)證碼"><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>

并把當(dāng)前組件放在需要使用它的組件中，這里需要注意的是，在控制綁定手機(jī)組件的顯示和隱藏的時(shí)候，出現(xiàn)了一個(gè)小問(wèn)題：點(diǎn)擊 “手機(jī)” 按鈕需要顯示當(dāng)前組件，但什么時(shí)候去隱藏當(dāng)前的組件呢，我是這樣想的：

　　情況1：用戶已經(jīng)輸完了手機(jī)號(hào)并通過(guò)了驗(yàn)證，點(diǎn)擊"確定"按鈕的時(shí)候需要隱藏當(dāng)前組件；

　　情況2：用戶沒(méi)有完成手機(jī)驗(yàn)證，但又不想繼續(xù)，點(diǎn)擊當(dāng)前手機(jī)的任意位置（除去“確定”按鈕、手機(jī)號(hào)輸入框和驗(yàn)證碼輸入框）都應(yīng)該隱藏當(dāng)前組件；

基于這兩種情況，我在父組件中給子組件添加了一個(gè)容器：

<li class="mui-table-view-cell phone-li">
 　　<span v-on:click="verifyPhone" class="mui-navigate-right"><span>手機(jī)號(hào)<span class="necessary">*</span></span></span>
 　　 <!-- 手機(jī)驗(yàn)證碼 -->
  <div class="shade" v-show="verifyShow" v-on:click="verifyPhone">
    <!-- 手機(jī)驗(yàn)證碼子組件 -->
    <phoneVerify></phoneVerify>
   </div>
　 </li>

通過(guò)控制父div 的顯示狀態(tài)來(lái)控制子組件的顯示狀態(tài)，

methods:{
  // 手機(jī)號(hào)驗(yàn)證
  verifyPhone(){
   this.verifyShow=!this.verifyShow;
  },
 },

在驗(yàn)證組件中的邏輯控制如下：

<script>
 // 引入彈窗組件
 import { Toast } from 'mint-ui';
 export default {
  data(){
   return {
    phoneNum:"", //手機(jī)號(hào)
    verifyNum:"", //驗(yàn)證碼
    btnContent:"獲取驗(yàn)證碼", //獲取驗(yàn)證碼按鈕內(nèi)文字
    time:0, //發(fā)送驗(yàn)證碼間隔時(shí)間
    disabled:false //按鈕狀態(tài)
   }
  },
  created(){
  },
  methods:{
   // 獲取驗(yàn)證碼
   sendSmsCode(){
    var reg=11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;//手機(jī)號(hào)正則驗(yàn)證
    var phoneNum = this.phoneNum;
    if(!phoneNum){//未輸入手機(jī)號(hào)
     Toast("請(qǐng)輸入手機(jī)號(hào)碼");
     return;
    }
    if(!reg.test(phoneNum)){//手機(jī)號(hào)不合法
     Toast("您輸入的手機(jī)號(hào)碼不合法，請(qǐng)重新輸入");
    }
    this.time = 60;
    this.timer();
    // 獲取驗(yàn)證碼請(qǐng)求
    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 = "獲取驗(yàn)證碼";
     clearTimeout(timer);
     this.disabled = false;
    }
   },
   // 驗(yàn)證驗(yàn)證碼
   verificationCode(){
    var phoneNum = this.phoneNum;//手機(jī)號(hào)
    var verifyNum = this.verifyNum;//驗(yàn)證碼
    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>

其中，獲取驗(yàn)證碼和驗(yàn)證短信驗(yàn)證碼的邏輯還沒(méi)有寫入。

PS：下面給大家補(bǔ)充一段vue短信驗(yàn)證碼組件實(shí)例代碼：

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 后重獲取' : '獲取驗(yàn)證碼';
    }
  }
});

<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); //設(shè)置按鈕不可用
      hz.ajaxRequest("sys/sendCode?_"+$.now(),function(data){
        if(data.status){
          vm.$refs.timerbtn.start(); //啟動(dòng)倒計(jì)時(shí)
        }else{
          vm.$refs.timerbtn.stop(); //停止倒計(jì)時(shí)
        }
      });
    },
  }
});

總結(jié)

以上所述是小編給大家介紹的Vue中添加手機(jī)驗(yàn)證碼組件功能操作方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: