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


Posted in Javascript onDecember 07, 2017

什么是组件:

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

写在前面:

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

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

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中添加手机验证码组件功能操作方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js取得url地址参数实例
Feb 22 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
javascript表单验证大全
Aug 12 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
vue--vuex详解
Apr 15 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
react学习笔记之state以及setState的使用
Dec 07 #Javascript
React Native 截屏组件的示例代码
Dec 06 #Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 #jQuery
mui back 返回刷新页面的实例
Dec 06 #Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 #Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 #jQuery
JS实现登录页密码的显示和隐藏功能
Dec 06 #Javascript
You might like
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
文化活动实施方案
2014/03/28 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
大学生标准自荐书
2014/06/15 职场文书
校园标语大全
2014/06/19 职场文书
社会发展项目建议书
2014/08/25 职场文书
中秋节随笔
2015/08/15 职场文书
工作自我评价范文
2019/03/21 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技