Vue中添加手机验证码组件功能操作方法
程序员文章站
2022-04-01 09:25:15
什么是组件:
组件是vue.js最强大的功能之一。组件可以扩展html元素,封装可重用的代码。在较高层面上,组件是自定义的元素,vue.js的编译器为它添加特殊功能。在有...
什么是组件:
组件是vue.js最强大的功能之一。组件可以扩展html元素,封装可重用的代码。在较高层面上,组件是自定义的元素,vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生html元素的形式,以is特性扩展。
写在前面:
今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能:
这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中:
<template > <div> <div class="bind-phone-box"> <div class="phone-title">绑定手机</div> <div class="phone-content" v-on:click.stop="fillcontent"> <input v-model="phonenum" class="phone-num" type="text" placeholder="请输入手机号码"> <div class="verify-box clearfix"> <input class="verify-num" v-model="verifynum" type="text" placeholder="请输入验证码"><input v-on:click="sendsmscode" class="verify-btn" type="button" v-model="btncontent" v-bind="{'disabled':disabled}"> </div> </div> <div class="phone-submit clearfix"> <input class="submit-cancel" type="button" value="取消"> <input class="submit-confirm" v-on:click.stop="verificationcode" type="button" value="确定"> </div> </div> </div> </template>
并把当前组件放在需要使用它的组件中,这里需要注意的是,在控制 绑定手机组件的显示和隐藏的时候,出现了一个小问题:点击 “手机” 按钮需要显示当前组件,但什么时候去隐藏当前的组件呢,我是这样想的:
情况1:用户已经输完了手机号并通过了验证,点击"确定"按钮的时候需要隐藏当前组件;
情况2:用户没有完成手机验证,但又不想继续,点击当前手机的任意位置(除去“确定”按钮、手机号输入框和 验证码输入框)都应该隐藏当前组件;
基于这两种情况,我在父组件中给子组件添加了一个容器:
<li class="mui-table-view-cell phone-li"> <span v-on:click="verifyphone" class="mui-navigate-right"><span>手机号<span class="necessary">*</span></span></span> <!-- 手机验证码 --> <div class="shade" v-show="verifyshow" v-on:click="verifyphone"> <!-- 手机验证码子组件 --> <phoneverify></phoneverify> </div> </li>
通过控制 父div 的显示状态来控制子组件的显示状态,
methods:{ // 手机号验证 verifyphone(){ this.verifyshow=!this.verifyshow; }, },
在验证组件中的逻辑控制如下:
<script> // 引入弹窗组件 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"); } } } </script>
其中,获取验证码和验证短信验证码的逻辑还没有写入。
ps:下面给大家补充一段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 后重获取' : '获取验证码'; } } });
<timer-btn ref="timerbtn" class="btn btn-default" v-on:run="sendcode" ></timer-btn>
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中添加手机验证码组件功能操作方法,希望对大家有所帮助
上一篇: 这瓜甜不等爆笑笑话两则