一、创建一个vue3项目,AboutView.vue找到文件
将以下代码复制上去
<template>
<div class="register">
<div class="register-form">
<h2 class="register-title">注册</h2>
<div class="register-input">
<input v-model="username" type="text" placeholder="请输入用户名" />
</div>
<div class="register-input">
<input v-model="password" type="password" placeholder="请输入密码" />
</div>
<div class="register-input">
<input v-model="confirmPassword" type="password" placeholder="请确认密码" />
</div>
<div class="register-actions">
<button class="register-btn" v-if="step === 1" @click="nextStep">下一步</button>
<button class="register-btn" v-if="step === 2" @click="finish">完成</button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
step: 1,
username: '',
password: '',
confirmPassword: ''
}
},
methods: {
nextStep() {
// 验证用户名、密码和确认密码是否为空
if (this.username.trim() === '' || this.password.trim() === '' || this.confirmPassword.trim() === '') {
alert('用户名、密码和确认密码不能为空!');
return;
}
// 验证密码是否相同
if (this.password !== this.confirmPassword) {
alert('两次输入的密码不一致!');
return;
}
// 进入第二步
this.step = 2;
},
finish() {
// 保存用户信息
const userInfo = {
username: this.username,
password: this.password
};
localStorage.setItem('userInfo', JSON.stringify(userInfo));
// 注册成功后跳转到首页
this.$router.push('/');
}
}
}
</script>
<style scoped>
.register {
width: 100%;
height: 100vh;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
}
.register-form {
width: 80%;
max-width: 400px;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.register-title {
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
.register-input {
margin-bottom: 20px;
}
.register-input input {
width: 100%;
padding: 10px;
font-size: 16px;
border: none;
border-bottom: 1px solid #ccc;
}
.register-input input:focus {
outline: none;
border-bottom: 2px solid #007aff;
}
.register-actions {
display: flex;
justify-content: center;
align-items: center;
}
.register-btn {
padding: 10px 20px;
font-size: 16px;
background-color: #007aff;
color: #fff;
border-radius: 20px;
border: none;
cursor: pointer;
}
.register-btn:focus {
outline: none;
}
@media screen and (max-width: 767px) {
.register-form {
max-width: 320px;
}
.register-title {
font-size: 18px;
}
.register-input input {
font-size: 14px;
}
.register-btn {
font-size: 14px;
padding: 8px 16px;
}
}
</style>
运行结果