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 添加/移除CSS类实现代码
Feb 11 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 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
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
Yii2如何批量添加数据
2016/05/17 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
浅谈php调用python文件
2019/03/29 PHP
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
python中pass语句用法实例分析
2015/04/30 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python序列类型的打包和解包实例
2019/12/21 Python
关于Python 中的时间处理包datetime和arrow的方法详解
2020/03/19 Python
几个常见的消息中间件(MOM)
2014/01/08 面试题
幼儿园教师备课制度
2014/01/12 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
求职信标题怎么写
2014/05/26 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
python中的sys模块和os模块
2022/03/20 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers