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 相关文章推荐
js类 from qq
Nov 13 Javascript
javascript 面向对象编程 function也是类
Sep 17 Javascript
使用JQuery进行跨域请求
Jan 25 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
图解JavaScript中的this关键字
May 28 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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中一个有意思的日期逻辑处理
2012/03/25 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
node网页分段渲染详解
2016/09/05 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
js实现上下左右弹框划出效果
2017/03/08 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
浅谈js闭包理解
2019/03/28 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python 多进程和数据传递的理解
2017/10/09 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
仓库管理计划书
2014/05/04 职场文书
公路绿化方案
2014/05/12 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
计划生育工作总结2015
2015/04/03 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
Python OpenGL基本配置方式
2022/05/20 Python
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS