使用vue3 elementplus写一个美观的登录页面
时间: 2023-08-07 12:35:10 浏览: 67
好的,我可以给你提供一个简单的实现方式。首先,你需要安装Vue3和Element Plus。
在Vue3中创建一个登录组件,可以使用以下代码:
```html
<template>
<div class="login-container">
<el-card class="login-card">
<h3>登录</h3>
<el-form :model="form" ref="form" :rules="rules" label-position="left" label-width="80px" class="login-form">
<el-form-item label="用户名" prop="username">
<el-input v-model.trim="form.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model.trim="form.password" type="password" autocomplete="off"></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 { ref } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElCard } from 'element-plus';
export default {
components: {
ElForm,
ElFormItem,
ElInput,
ElButton,
ElCard,
},
setup() {
const form = ref({
username: '',
password: '',
})
const rules = ref({
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})
const submitForm = () => {
const valid = this.$refs.form.validate()
if (valid) {
// TODO: 处理登录逻辑
}
}
return {
form,
rules,
submitForm,
}
},
}
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.login-card {
width: 400px;
}
.login-form {
margin-top: 30px;
}
</style>
```
这段代码使用了Element Plus的一些组件,包括 `ElCard`、`ElForm`、`ElFormItem`、`ElInput` 和 `ElButton`。
在 `setup` 函数中,我们使用了Vue3的 `ref` 来创建响应式数据 `form` 和 `rules`。`submitForm` 函数处理表单的提交逻辑。
最后,我们在样式中使用 `scoped` 关键字来确保样式只应用于当前组件。
这个登录页面只是一个简单的示例,你可以根据自己的需求进行修改和扩展。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)