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 相关文章推荐
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 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
深入file_get_contents与curl函数的详解
2013/06/25 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python爬豆瓣电影实例
2018/02/23 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
python 读取数据库并绘图的实例
2019/12/03 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Python函数式编程实例详解
2020/01/17 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
如何选择使用结构还是类
2014/05/30 面试题
最受欢迎的自我评价
2013/12/22 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
《问银河》教学反思
2014/02/19 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
党员演讲稿
2014/09/04 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
浅析Python OpenCV三种滤镜效果
2022/04/11 Python