Vue 短信验证码组件开发详解
发布时间：2020-12-17 03:04:04 所属栏目：百科 来源：网络整理
导读：Vue.js（读音 /vju/,类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合
|
Vue.js（读音 /vjuː/,类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。 摘要:1、该组件基于Vue 2.1.X版本； 1、 Vue 组件代码如下：',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、使用方式：disabled 建议不要绑定，我们可以通过调用组件的setDisabled方法来切换按钮可用状态； second 初始值60s 没特别值可以不绑定； 所以我们可以在HTML页面这样： JS这样： 以上所述是小编给大家介绍的Vue 短信验证码组件开发详解。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |