Vue中添加手机验证码组件功能操作方法
作者:小黑LEI 时间:2023-07-02 16:57:16
什么是组件:
组件是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中添加手机验证码组件功能操作方法网站的支持!
来源:http://www.cnblogs.com/blackin/archive/2017/12/06/7993868.html
标签:vue,验证码,组件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
SQL Server数据库管理常用SQL和T-SQL语句
2009-05-07 14:01:00
python实现随机密码字典生成器示例
2022-07-25 17:11:50
lnmp下如何关闭Mysql日志保护磁盘空间
2024-01-14 02:54:52
python实现对excel进行数据剔除操作实例
2022-09-28 13:53:22
numpy.float32的典型用法
2022-04-30 04:36:30
PHP常用字符串函数小结(推荐)
2023-06-14 00:18:50
python 装饰器详解与应用范例
2022-03-18 01:06:55
简单了解Django ORM常用字段类型及参数配置
2022-11-03 09:11:38
Mysql权限管理grant命令使笔记
2024-01-18 02:08:28
详解Go中gin框架如何实现带颜色日志
2024-05-21 10:19:11
![](https://img.aspxhome.com/file/2023/2/125072_0s.webp)
python字符类型的一些方法小结
2023-06-27 00:00:20
如何查询Top N及Top(M―N)记录?
2009-11-11 20:03:00
代码讲解Python对Windows服务进行监控
2023-10-07 10:59:09
Python Panda中索引和选择 series 的数据
2023-05-03 10:02:56
![](https://img.aspxhome.com/file/2023/5/77865_0s.png)
有用的:nth-child秘方
2011-07-01 12:56:11
Python 绘图库 Matplotlib 入门教程
2021-07-21 00:22:07
![](https://img.aspxhome.com/file/2023/6/99166_0s.jpg)
python模型集成知识点总结
2023-08-03 00:16:16
十分钟搞定pandas(入门教程)
2023-08-09 01:00:15
![](https://img.aspxhome.com/file/2023/0/63950_0s.jpg)
Django restful framework生成API文档过程详解
2021-08-10 16:37:16
![](https://img.aspxhome.com/file/2023/5/76005_0s.png)
python实现提取str字符串/json中多级目录下的某个值
2022-02-25 23:07:15
![](https://img.aspxhome.com/file/2023/7/90707_0s.jpg)