效果图如下所示:
步骤如下:
使用element ui的steps步骤条来做,active==0表示第一个步骤被选择。
如何更换步骤条下方的内容?
使用vue的语法v-if,判断active的状态来显示不同的内容。
<div class="telcontent" v-if="active == 1">
<div class="username" v-if="active == 2">
倒计时效果代码:
<span v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{ count }} s</span>
getCode() {
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
限制输入为整数:
<el-input v-model="input" placeholder="验证码"
oninput = "value=value.replace(/[^\d]/g,'')"
maxlength="6"
></el-input>
完整代码如下:
<template>
<div class="register-container">
<div class="header">
<div class="logo">
<router-link to="/home">
<img src="images/logo.png" />
</router-link>
<p>欢迎注册</p>
</div>
</div>
<!-- 注册内容 -->
<div class="register">
<h3>
注册新用户
<span class="go"
>已有账号,去 <router-link to="/login">登陆></router-link>
</span>
</h3>
<div class="step">
<el-steps :active="active" finish-status="success" align-center="true">
<el-step title="验证手机号"></el-step>
<el-step title="填写账号"></el-step>
<el-step title="注册成功"></el-step>
</el-steps>
</div>
<div class="telcontent" v-if="active == 1">
<el-input v-model="mobile" placeholder="请输入手机号"
oninput = "value=value.replace(/[^\d]/g,'')"
maxlength="11"
minlength="11"
></el-input>
</div>
<div class="codecontent" v-if="active == 1">
<el-input v-model="input" placeholder="验证码"
oninput = "value=value.replace(/[^\d]/g,'')"
maxlength="6"
></el-input>
<span v-show="show" @click="getCode">获取验证码</span>
<span v-show="!show" class="count">{{ count }} s</span>
</div>
<div class="username" v-if="active == 2">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
</div>
<div class="pwdfirst" v-if="active == 2">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="密码">
<el-input v-model="form.pwdfirst" show-password></el-input>
</el-form-item>
</el-form>
</div>
<div class="pwdagain" v-if="active == 2">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="确认密码">
<el-input v-model="form.pwdagain" show-password></el-input>
</el-form-item>
</el-form>
</div>
<div class="registersuccess" v-if="active == 3">
<img src="./images/success.png" />
<label>注册成功!</label>
</div>
<div></div>
<div class="btn">
<!-- <button>下一步</button> -->
<el-button type="danger" @click="next" v-if="active==1 || active==2">下一步</el-button>
</div>
</div>
<!-- 底部 -->
<div class="copyright">
<ul>
<li>关于我们</li>
<li>联系我们</li>
<li>联系客服</li>
</ul>
<div class="address">
xxxxxxxxxx </div>
<div class="beian">xxxxxxxx</div>
</div>
</div>
</template>
<script>
export default {
name: "Register",
data() {
return {
show: true,
count: "",
timer: null,
active: 1,
input: "",
mobile:"",
form: {
name: "",
pwdfirst: "",
pwdagain: "",
},
};
},
methods: {
getCode() {
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.show = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
}
},
next() {
if (this.active++ > 2) this.active = 3;
},
},
};
</script>
<style lang="less" scoped>
.register-container {
.header {
height: 100px;
.logo {
padding-left: 42%;
img {
height: 100px;
float: left;
}
p {
float: left;
font-size: 28px;
padding-top: 35px;
padding-left: 10px;
}
}
}
.register {
width: 1200px;
height: 445px;
border: 1px solid rgb(223, 223, 223);
margin: 0 auto;
h3 {
background: #ececec;
margin: 0;
padding: 6px 15px;
color: #333;
border-bottom: 1px solid #dfdfdf;
font-size: 20px;
line-height: 30.06px;
span {
font-size: 16px;
float: right;
color: #999;
a {
color: #ff5e39;
}
}
}
.step {
width: 500px;
padding-left: 30%;
padding-top: 20px;
}
.telcontent {
padding-left: 460px;
margin-bottom: 20px;
margin-top: 50px;
width: 270px;
position: relative;
}
.codecontent {
padding-left: 460px;
margin-bottom: 50px;
width: 150px;
position: relative;
span {
position: absolute;
width: 100px;
font-size: 16px;
padding-left: 20px;
padding-top: 10px;
color: #ff5e39;
}
.count {
padding-left: 50px;
}
}
.username {
width: 270px;
padding-left: 38%;
padding-top: 50px;
}
.pwdfirst {
width: 270px;
padding-left: 38%;
}
.pwdagain {
width: 270px;
padding-left: 38%;
}
.registersuccess {
img {
padding-left: 46%;
padding-top: 20px;
padding-bottom: 40px;
}
label{
padding-left: 46%;
font-size: 32px;
}
}
.controls {
text-align: center;
position: relative;
input {
vertical-align: middle;
}
.error-msg {
position: absolute;
top: 100%;
left: 495px;
color: red;
}
}
.btn {
text-align: center;
line-height: 36px;
margin: 15px 0 0 10px;
button {
// outline: none;
width: 250px;
height: 36px;
background: #ff5e39;
// background: #ff5e39;
// color: #fff !important;
// display: inline-block;
// font-size: 16px;
}
}
}
.copyright {
width: 1200px;
margin: 0 auto;
text-align: center;
line-height: 24px;
background-color: #eaeaea;
padding-bottom: 50px;
ul {
li {
display: inline-block;
border-right: 1px solid #e4e4e4;
padding: 0 20px;
margin: 15px 0;
}
}
}
}
</style>