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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
js css样式操作代码(批量操作)
Oct 09 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
基于vue展开收起动画的示例代码
Jul 05 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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
服务器端解压缩zip的脚本
2006/12/22 PHP
PHP注释实例技巧
2008/10/03 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
Angular5升级RxJS到5.5.3报错:EmptyError: no elements in sequence的解决方法
2018/04/09 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
python 解析html之BeautifulSoup
2009/07/07 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
详解Python爬虫的基本写法
2016/01/08 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
Django在Model保存前记录日志实例
2020/05/14 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
主管竞聘书范文
2014/03/31 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
工伤事故证明
2014/10/20 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫