Vue 短信验证码组件开发详解


Posted in Javascript onFebruary 14, 2017

Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

摘要:

1、该组件基于Vue 2.1.X版本;

1、 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 后重获取' : '获取验证码';
    }
  }
});

2、使用方式:

<timer-btn ref="timerbtn" class="btn btn-default" v-on:run="sendCode" 
:disabled="disabled" :second="60"></timer-btn>

disabled 建议不要绑定,我们可以通过调用组件的setDisabled方法来切换按钮可用状态;

second 初始值60s 没特别值可以不绑定;

所以我们可以在HTML页面这样:

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

JS这样:

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 相关文章推荐
jquery购物车实时结算特效实现思路
Sep 23 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
js自定义瀑布流布局插件
May 16 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
vue实现下拉菜单树
Oct 22 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
JS去除字符串中空格的方法
Feb 14 #Javascript
Node.js与Sails redis组件的使用教程
Feb 14 #Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 #Javascript
canvas实现十二星座星空图
Feb 14 #Javascript
JavaScript省市级联下拉菜单实例
Feb 14 #Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 #Javascript
jQuery实现用户输入自动完成功能
Feb 13 #Javascript
You might like
5.PHP的其他功能
2006/10/09 PHP
信用卡效验程序
2006/10/09 PHP
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
PHP验证终端类型是否为手机的简单实例
2017/02/07 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
JS中表单的使用小结
2014/01/11 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python格式化输出%s和%d
2018/05/07 Python
python爬取指定微信公众号文章
2018/12/20 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
python几种常用功能实现代码实例
2019/12/25 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
留学自荐信
2013/10/10 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
大学生创业感言
2014/01/25 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
神秘岛读书笔记
2015/07/01 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫