cc废话不多说先上效果图
vue页面布局
<el-form-item prop="phoneCode" class="pr">
<el-input 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>css样式 文章来源：https://www.toymoban.com/news/detail-713554.html
/* 短信验证码css */
.pr {
position: relative;
}
.code-btn {
width: 100px;
height: 20px;
position: absolute;
top: 10px;
right: 5px;
z-index: 222;
color: #ef8466;
font-size: 14px;
border: none;
border-left: 1px solid #bababa;
padding-left: 10px;
background-color: #fff;
cursor: pointer;
}逻辑js文章来源地址https://www.toymoban.com/news/detail-713554.html
// 获取短信验证码
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);
}
}到了这里，关于vue element-ui实现获取短信验证码 ,60秒倒计时及页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
