基于element plus的登录页面代码
时间: 2023-11-14 14:13:00 浏览: 25
以下是基于 Element Plus 的登录页面代码示例:
```html
<template>
<div class="login-container">
<el-card class="login-card">
<h3 class="title">用户登录</h3>
<el-form :model="form" ref="form" :rules="rules" label-width="80px">
<el-form-item label="用户名" prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" type="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>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
}
},
methods: {
async login() {
try {
await this.$refs.form.validate()
// 调用登录接口
// ...
this.$message.success('登录成功')
// 跳转到首页
this.$router.push('/')
} catch (error) {
// 验证失败,提示错误信息
this.$message.error(error.message)
}
}
}
}
</script>
<style scoped>
.login-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.login-card {
width: 400px;
padding: 30px;
border-radius: 5px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.title {
text-align: center;
margin-bottom: 20px;
}
</style>
```
在上述代码中,使用了 Element Plus 的 `el-card`、`el-form`、`el-form-item` 和 `el-input` 组件来实现登录页面的布局和表单验证。其中,使用了 `async/await` 来处理登录接口的异步请求。在登录成功后,通过 `$router.push()` 方法跳转到首页。