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 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
js DOM模型操作
Dec 28 Javascript
js类型检查实现代码
Oct 29 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 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
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
js实现仿阿里巴巴城市选择框效果实例
2015/06/24 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python用GET方法上传文件
2015/03/10 Python
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
python如何实现int函数的方法示例
2018/02/19 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python运行DLL文件的方法
2020/01/17 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
大学生职业生涯规划方案
2014/01/03 职场文书
另类冲刺标语
2014/06/24 职场文书
自查自纠工作总结
2014/10/15 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
七年级英语教学反思
2016/02/15 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
Oracle 触发器trigger使用案例
2022/02/24 Oracle
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis