资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

Vue中如何添加手机验证码组件功能

这篇文章主要介绍Vue中如何添加手机验证码组件功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联主营芮城网站建设的网络公司,主营网站建设方案,重庆APP软件开发,芮城h5成都小程序开发搭建,芮城网站营销推广欢迎芮城等地区企业咨询

什么是组件：

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

写在前面：

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

Vue中如何添加手机验证码组件功能

Vue中如何添加手机验证码组件功能

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


 

  
   绑定手机

   
    
    
     
    
   
                 
    

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

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

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

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


 　　手机号*
 　　 
  
    
    
   
　 

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

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

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

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

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

Vue.component('timerBtn',{
  template: ' 0">{{ text }}',
  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 后重获取' : '获取验证码';
    }
  }
});
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中如何添加手机验证码组件功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


新闻标题：Vue中如何添加手机验证码组件功能
本文链接：http://cdkjz.cn/article/pegcph.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
犀浦防护栏定制电子商务商城网站手机APP开发固迪佳新材料腾讯云免备案主机四川服务器托管成都力比特成都营销网站制作公司logo设计王君美油画

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图