使用vue3 elementplus写一个美观的登录页面
时间: 2023-08-07 07:14:06 浏览: 41
好的,以下是一个简单的登录页面的代码示例:
```html
<template>
<div class="login-container">
<el-card class="login-card">
<div class="login-title">用户登录</div>
<el-form ref="form" :model="form" label-width="80px" class="login-form">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
name: 'Login',
setup() {
const form = reactive({
username: '',
password: '',
});
function submitForm() {
// TODO: 实现登录逻辑
}
return { form, submitForm };
},
};
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f7fa;
}
.login-card {
width: 400px;
border-radius: 5px;
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
.login-title {
font-size: 24px;
font-weight: bold;
text-align: center;
padding-top: 20px;
}
.login-form {
margin: 20px;
}
</style>
```
这个页面使用 Element Plus 的 `el-card` 和 `el-form` 组件来布局,使用了 Vue 3 的 Composition API 中的 `reactive` 函数来定义登录表单的数据模型,并使用 `submitForm` 函数来实现登录逻辑。样式方面,使用了 Flex 布局、圆角和阴影等效果来让页面看起来更加美观。