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短信验证码组件开发详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！