使用elementui实现一个登录和注册样式
时间: 2024-02-12 19:05:03 浏览: 33
好的,下面是使用 ElementUI 实现登录和注册样式的代码示例:
```html
<template>
<div class="login-container">
<el-card class="login-card">
<h2 class="title">登录</h2>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-width="80px" class="login-form">
<el-form-item label="账号" prop="username">
<el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="register-card">
<h2 class="title">注册</h2>
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-width="80px" class="register-form">
<el-form-item label="账号" prop="username">
<el-input v-model="registerForm.username" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="registerForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input type="password" v-model="registerForm.confirmPassword" placeholder="请确认密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="register">注册</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
},
registerForm: {
username: '',
password: '',
confirmPassword: ''
},
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: {
login() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 登录逻辑
}
})
},
register() {
this.$refs.registerForm.validate(valid => {
if (valid) {
// 注册逻辑
}
})
}
}
}
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f2f5;
}
.login-card,
.register-card {
width: 400px;
margin: 0 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
.title {
text-align: center;
font-size: 20px;
margin-bottom: 20px;
}
.login-form,
.register-form {
padding: 20px;
}
</style>
```
这段代码实现了一个登录和注册的界面,使用了 ElementUI 的 Card、Form、FormItem、Input、Button 等组件,同时也定义了表单验证规则。需要注意的是,为了让登录和注册界面并列显示,这里使用了 Flex 布局。