Vue中怎么添加手机验证码组件功能
这篇文章主要介绍了Vue中怎么添加手机验证码组件功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中怎么添加手机验证码组件功能文章都会有所收获，下面我们一起来看看吧。
成都创新互联公司是一家集网站建设,石峰企业网站建设,石峰品牌网站建设,网站定制,石峰网站建设报价,网络营销,网络优化,石峰网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
什么是组件：
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。
写在前面：
今天要实现的功能是在 完善个人信息页面（vue）中添加手机验证码组件，当用户点击 手机选项时，弹出获取验证码组件，完成验证手机的功能：
这里考虑到功能的复用，我把当前弹出手机验证码的操作放在了单独的组件中：
并把当前组件放在需要使用它的组件中，这里需要注意的是，在控制 绑定手机组件的显示和隐藏的时候，出现了一个小问题：点击 “手机” 按钮需要显示当前组件，但什么时候去隐藏当前的组件呢，我是这样想的：
情况1：用户已经输完了手机号并通过了验证，点击"确定"按钮的时候需要隐藏当前组件；
情况2：用户没有完成手机验证，但又不想继续，点击当前手机的任意位置（除去“确定”按钮、手机号输入框和 验证码输入框）都应该隐藏当前组件；
基于这两种情况，我在父组件中给子组件添加了一个容器：
手机号*
通过控制 父div 的显示状态来控制子组件的显示状态，
methods:{
// 手机号验证
verifyPhone(){
this.verifyShow=!this.verifyShow;
},
},在验证组件中的逻辑控制如下：
其中，获取验证码和验证短信验证码的逻辑还没有写入。
PS：下面给大家补充一段vue短信验证码组件实例代码：
Vue.component('timerBtn',{
template: ' 0">{{ text }}',
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 后重获取' : '获取验证码';
}
}
});
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中怎么添加手机验证码组件功能
转载来源：http://chengdu.cdxwcx.cn/article/pecegg.html
