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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
JSF中confirm弹出框的用法示例介绍
Jan 07 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
TypeScript 中接口详解
Jun 19 Javascript
Javascript的this用法
Jan 16 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
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
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
PHP使用数组实现队列
2012/02/05 PHP
情人节之礼 js项链效果
2012/02/13 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
用POSTMAN发送JSON格式的POST请求示例
2018/09/04 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
django ajax json的实例代码
2018/05/29 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Python如何解除一个装饰器
2020/08/07 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
运动会通讯稿400字
2014/01/28 职场文书
大学校庆策划书
2014/01/31 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
学校运动会开幕词
2016/03/03 职场文书
python基础之类方法和静态方法
2021/10/24 Python
Redis实战高并发之扣减库存项目
2022/04/14 Redis