思路
1，先判断手机号和验证是否为空，
2，点击发送验证码，1分钟计时，得到验证码
3，输入的验证码是否为空和是否正确，
4，最后向服务发送请求
标签显示
<el-form-item label="短信验证" prop="phoneCode" class="pr">
<el-input style="width:400px;" placeholder="请输入您接收的短信验证码" v-model="form.phoneCode"></el-input>
<button @click.prevent="getCode()" class="code-btn" :disabled="!show">
<span v-show="show">获取验证码</span>
<span v-show="!show" class="count">{{count}} s</span>
</button>
</el-form-item>
//初始值
show: 'false',
count: '',
//方法
methods: {
// 获取短信验证码
getCode() {
//axios请求
console.log(this.form.phone);
// 验证码倒计时
if (!this.timer) {
this.count = 60;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= 60) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
样式
// 短信验证码
.pr,
{
position: relative;
}
.code-btn {
width: 100px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
z-index: 222;
//#ef8466橘色
color: #409EFF;
font-size: 14px;
border: none;
border-left: 1px solid #bababa;
padding-left: 10px;
background-color: #fff;
//鼠标指针的样式:伸出食指的手,default 箭头，crosshair 十字，progress 箭头和沙漏
cursor: pointer;
}
效果显示
初始界面如下：
效果图1
获取验证码时进行倒计时效果如下：
效果图2
