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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
VUE重点问题总结
Mar 19 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 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和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
原生js开发的日历插件
2017/02/04 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python实现购物车功能的方法分析
2017/11/10 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
python中的字符串内部换行方法
2018/07/19 Python
python实现远程控制电脑
2019/05/23 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
init进程的作用
2012/04/12 面试题
美发店5.1活动方案
2014/01/24 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
爱之链教学反思
2014/04/30 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
感谢信模板大全
2015/01/23 职场文书
美术教师求职信范文
2015/03/20 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
音乐课外活动总结
2015/05/09 职场文书
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL