Vue 短信验证码组件开发详解
Vue.js(读音/vjuː/,类似于view)是一个构建数据驱动的web界面的库。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
Vue.js自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js也能完美地驱动复杂的单页应用。
摘要:
1、该组件基于Vue2.1.X版本;
1、Vue组件代码如下:
Vue.component('timerBtn',{ template:'<buttonv-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(){ returnthis.time>0?this.time+'s后重获取':'获取验证码'; } } });
2、使用方式:
<timer-btnref="timerbtn"class="btnbtn-default"v-on:run="sendCode" :disabled="disabled":second="60"></timer-btn>
disabled建议不要绑定,我们可以通过调用组件的setDisabled方法来切换按钮可用状态;
second初始值60s没特别值可以不绑定;
所以我们可以在HTML页面这样:
<timer-btnref="timerbtn"class="btnbtn-default"v-on:run="sendCode"></timer-btn>
JS这样:
varvm=newVue({ 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短信验证码组件开发详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!