什么是组件：
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。
写在前面：
今天要实现的功能是在 完善个人信息页面（vue）中添加手机验证码组件，当用户点击 手机选项时，弹出获取验证码组件，完成验证手机的功能：
这里考虑到功能的复用，我把当前弹出手机验证码的操作放在了单独的组件中：
Box">
Box clearfix">
并把当前组件放在需要使用它的组件中，这里需要注意的是，在控制 绑定手机组件的显示和隐藏的时候，出现了一个小问题：点击 “手机” 按钮需要显示当前组件，但什么时候去隐藏当前的组件呢，我是这样想的：
情况1：用户已经输完了手机号并通过了验证，点击"确定"按钮的时候需要隐藏当前组件；
情况2：用户没有完成手机验证，但又不想继续，点击当前手机的任意位置（除去“确定”按钮、手机号输入框和 验证码输入框）都应该隐藏当前组件；
基于这两种情况，我在父组件中给子组件添加了一个容器：
手机号
在验证组件中的逻辑控制如下：
// 引入弹窗组件
import { Toast } from 'mint-ui';
export default {
data(){
return {
phoneNum:"",//手机号
verifyNum:"",//验证码
btnContent:"获取验证码",//获取验证码按钮内文字
time:0,//发送验证码间隔时间
disabled:false //按钮状态
}
},created(){
},methods:{
// 获取验证码
sendSmsCode(){
var reg=11&& /^((13|14|15|17|18)[0-9]{1}\d{8})$/;//手机号正则验证
var phoneNum = this.phoneNum;
if(!phoneNum){//未输入手机号
Toast("请输入手机号码");
return;
}
if(!reg.test(phoneNum)){//手机号不合法
Toast("您输入的手机号码不合法，请重新输入");
}
this.time = 60;
this.timer();
// 获取验证码请求
var url = 'http://bosstan.asuscomm.com/api/common/sendSmsCode';
this.$http.post(url,{username:phoneNum},{emulateJSON:true}).then((response)=>{
console.log(response.body);
});
},timer(){
if(this.time>0){
this.time--;
this.btnContent = this.time+"s后重新获取";
this.disabled = true;
var timer = setTimeout(this.timer,1000);
}else if(this.time == 0){
this.btnContent = "获取验证码";
clearTimeout(timer);
this.disabled = false;
}
},// 验证验证码
verificationCode(){
var phoneNum = this.phoneNum;//手机号
var verifyNum = this.verifyNum;//验证码
var url = 'http://bosstan.asuscomm.com/api/common/verificationCode';
this.$http.post(url,{
username:phoneNum,code:verifyNum
},{
emulateJSON:true
}).then((response)=>{
console.log(response.body);
});
},fillContent(){
// console.log("fillContent");
}
}
}
其中，获取验证码和验证短信验证码的逻辑还没有写入。
PS：下面给大家补充一段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 后重获取' : '获取验证码';
}
}
});
总结
以上所述是小编给大家介绍的Vue中添加手机验证码组件功能操作方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/34838.html