未加星标

每日一博|超简单!Vue 短信验证码组件开发详解

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

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(); //停止倒计时 } }); }, } });

OK,到这就全搞定了;

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTML
分页:12
转载请注明
本文标题:每日一博|超简单!Vue 短信验证码组件开发详解
本站链接:http://www.codesec.net/view/532625.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(247)