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 相关文章推荐
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
详解如何运行vue项目
Apr 15 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
基于JavaScript实现省市联动效果
Jun 22 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
php intval函数用法总结
2019/04/14 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
javascript self对象使用详解
2016/10/18 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
Python几种常见算法汇总
2020/06/02 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
八年级数学教学反思
2014/01/31 职场文书
《赵州桥》教学反思
2014/02/17 职场文书
公司老总年会致辞
2015/07/30 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
JS函数式编程实现XDM一
2022/06/16 Javascript