Vue 短信验证码组件开发详解

Vue.js（读音/vjuː/,类似于view）是一个构建数据驱动的web界面的库。Vue.js的目标是通过尽

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

vue 短信验证码组件 vue组件