下面是使用Vue3和element-plus写登录注册页面的示例代码：
首先，在main.js文件中引入Vue和element-plus组件库：
import {
createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import App from './App.vue'
createApp(App).use(ElementPlus).mount('#app')
接着，在App.vue文件中编写页面布局和组件逻辑：
<template>
<div class="container">
<div class="tab">
<span :class="{active: isLogin}" @click="toggleTab(true)">登录</span>
<span :class="{active: !isLogin}" @click="toggleTab(false)">注册</span>
</div>
<div class="form">
<el-form v-if="isLogin" :model="loginForm" :rules="loginRules" ref="loginForm" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
<el-form v-else :model="registerForm" :rules="registerRules" ref="registerForm" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="registerForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="registerForm.password"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="registerForm.confirmPassword"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">注册</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
isLogin: true,
loginForm: {
username: '',
password: ''
},
registerForm: {
username: '',
password: '',
confirmPassword: ''
},
loginRules: {
username: [
{
required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{
required: true, message: '请输入密码', trigger: 'blur' }
]
},
registerRules: {
username: [
{
required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{
required: true, message: '请输入密码', trigger: 'blur' }
],
confirmPassword: [
{
required: true, message: '请再次输入密码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value !== this.registerForm.password) {
callback(new Error('两次输入的密码不一致'))
} else {
callback()
}
},
trigger: 'blur'
}
]
}
};
},
methods: {
toggleTab(isLogin) {
this.isLogin = isLogin
},
login() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 发送登录请求
console.log('登录成功')
}
})
},
register() {
this.$refs.registerForm.validate(valid => {
if (valid) {
// 发送注册请求
console.log('注册成功')
}
})
}
}
}
</script>
<style>
.container {
width: 500px;
margin: 100px auto;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.tab {
display: flex;
justify-content: space-between;
padding: 10px 20px;
font-size: 16px;
font-weight: 600;
border-bottom: 1px solid #ddd;
}
.tab span {
cursor: pointer;
padding: 10px 20px;
color: #666;
}
.tab span.active {
color: #333;
border-bottom: 2px solid #409EFF;
}
.form {
padding: 20px;
}
.el-form-item__error {
line-height: 1;
}
</style>
在页面布局方面，我们使用了element-plus提供的布局组件el-form、el-form-item和el-input来实现登录和注册表单的布局。
使用v-if指令和v-else指令来判断当前显示的是登录表单还是注册表单。
使用isLogindata属性来记录当前显示的是登录还是注册表单，使用toggleTab方法来切换登录和注册表单。
使用v-model指令来双向绑定表单数据，使用loginRules和registerRules来设置表单验证规则。
在方法方面，使用validate方法来验证表单数据是否符合验证规则，使用login和register方法来处理登录和注册请求。
最终的效果图如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R5AtJtv5-1680676470619)(https://cdn.nlark.com/yuque/0/2021/png/2241483/1627587962577-296b1440-44fe-4700-af06-2d7f3cf27865.png)]