在Vue中添加手机验证码组件功能的操作方法

什么是组件：

组件是Vue.js最强大的功能之一组件可以扩展HTML元素，封装可重用的代码。在更高的层次上，组件是一个自定义元素，Vue.js的编译器为其添加了特殊的功能。在某些情况下，组件也可以是本机HTML元素的形式，这些元素通过is特性进行扩展。

写在前面：

今天要实现的功能是在完美的个人信息页面(vue)上增加一个手机验证码组件。当用户点击手机选项时，弹出获取验证码组件，完成手机验证功能：

考虑到这里的功能复用，我把当前弹出手机验证码的操作放在一个单独的组件中：

模板Div class=' bind-phone-box ' Div class=' phone-title '绑定手机/Div class=' phone-content ' v-: click。stop=' fill content ' input v-model=' phone num ' class=' phone-num ' type=' text ' placeholder='请输入您的手机号码' Div class=Verify-box clear fix ' input class=' Verify-num ' v-model=' Verify num ' type=' text ' placeholder='请输入验证码' input v-: click=' send SMS code ' class=' Verify-BTN ' type=' button ' v-model=' btnContent ' v-bind=' { ' disabled ' 33:dstop=' verificati OnCode ' type=' button ' value=' OK '/div/div/template并将当前组件放入需要使用它的组件中。这里需要注意的是，在控制绑定手机组件的显示和隐藏时，有一个小问题：点击“手机”按钮需要显示当前组件，但在什么时候隐藏当前组件，我认为是这样的：

案例一：用户已经输入手机号，通过验证。点击“确定”按钮时，需要隐藏当前组件；

案例二：用户未完成手机验证，但不想继续。点击当前手机的任意位置(除“确定”按钮、手机号码输入框、验证码输入框外)应隐藏当前组件；

基于这两种情况，我向父组件中的子组件添加了一个容器：

Li=' mui-table-view-phone-Li ' span v-: click=' verify phone ' class=' mui-navigation-right ' span手机号码span class='必要' */span/span/span！-手机验证码-div class=' shade ' v-show=' verify show ' v-: click=' verify phone '！-电话验证码子组件-phone verify/phone verify/div/Li通过控制父div的显示状态来控制子组件的显示状态。

Methods:{ //手机号码验证verifyPhone(){ this.verifyShow=！this.verifyShow}，}，验证组件中的逻辑控制如下：

脚本/引入弹窗组件从“薄荷味”导入{ Toast }；导出默认{ data(){ return { phonenum 3360 ' '，//手机号verifyNum: ' '，//验证码' btnContent: '获取验证码', //获取验证码按钮内文字time:0，//发送验证码间隔时间disabled:false //按钮状态} }，created(){ }，methods:{ //获取验证码sendsmscode(){ var reg=11 /^((13|14|15|17|18)[0-9]{1}\d{8})$/；//手机号正则验证var电话号码=这个。电话号码；if(！phoneNum){//未输入手机号祝酒词('请输入手机号码');返回；} if(！reg.test(phoneNum)){//手机号不合法祝酒词('您输入的手机号码不合法，请重新输入');} this.time=60this。timer()；//获取验证码请求var URL=' http://老板谭。华硕网站。com/API/common/sendsmtscode '；这个$http.post(url，{username:phoneNum}，{ 0仿真器SON:true}).然后((响应)={控制台。日志(响应。身体)；});}，timer(){ if(this。时间0){ this。时间-；这是时间后重新获取；this . disabled=true var timer=setTimeout(this . timer，1000)；} else if(这个。time==0){ this。BTN内容='获取验证码；clearTimeout(计时器);this.disabled=false} }，//验证验证码verificationCode(){ var PhoneNum=this。phoneNum//手机号this.verifyNum//验证码var URL=' http://老板谭。华硕网站。com/API/common/verificationCode '；这个$http.post(url，{ username:phoneNum，code:verifyNum }，{ 0仿真器SON:true }).然后((响应)={控制台。日志(响应。身体)；});}，填充内容(){//控制台。日志(“填充内容”)；} } }/脚本其中，获取验证码和验证短信验证码的逻辑还没有写入。

PS:下面给大家补充一段某视频剪辑软件短信验证码组件实例代码：

Vue.component('timerBtn '，{ template : ' button v-: click=' run ' : disabled=' disabled | ' time 0 ' { text } }/button '，prop : { second : { type : Number，default: 60 }，disabled 33: { type 3333: Boolean，default: false } }，data 333333: function(){ ret}，启动：函数(){ this。时间=这个。第二；这个。timer()；}，stop:函数(){这个。时间=0；this.disabled=false}，setDisabled:函数{这个。disabled=val}，定时器：函数(){ if(this。时间0){ this。时间-；setTimeout(this.timer，1000)；} else { this.disabled=false} }，computed : { text : function(){ return this。时间0？这是时间后重获取' : '获取验证码；} }});timer-BTN ref=' timer BTN ' class=' BTN BTN-默认' v-: run=' send code '/timer-BTN var VM=new Vue({ El : ' # app '，methods : { send code : FuncTion(){ VM .参考文献。timerbtn。setdisabled(真)；//设置按钮不可用hz.ajaxRequest('sys/sendCode？_' $.now()，function(data){ if(data。状态){虚拟机.参考文献。timerbtn。start()；//启动倒计时}else{ vm .参考文献。timerbtn。stop()；//停止倒计时} });}, }});

总结

以上所述是小编给大家介绍的某视频剪辑软件中添加手机验证码组件功能操作方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！