用elementplus做一个登录页面
时间: 2023-07-27 15:17:13 浏览: 75
好的,下面是一个使用 Element Plus 组件库实现的登录页面示例代码:
```html
<template>
<div class="login-container">
<el-card class="login-card">
<h3 class="title">用户登录</h3>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" class="login-btn" @click="submitForm">登录</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' }
]
}
}
},
methods: {
submitForm() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 登录逻辑
} else {
return false;
}
})
}
}
}
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.login-card {
width: 400px;
}
.title {
text-align: center;
margin-bottom: 24px;
}
.login-form {
width: 100%;
}
.login-btn {
width: 100%;
}
</style>
```
这个登录页面包含一个输入用户名和密码的表单,以及一个登录按钮,用户输入用户名和密码后点击登录按钮即可触发登录逻辑。在这个示例中,我们使用了 Element Plus 提供的 `el-card`、`el-form`、`el-form-item`、`el-input` 和 `el-button` 等组件来构建页面。同时,我们也定义了一个 `loginForm` 对象用于保存用户输入的用户名和密码,以及一个 `loginRules` 对象用于设置表单的校验规则。最后,我们在 `submitForm` 方法中通过调用 `validate` 方法来触发表单的校验,并在校验通过后执行登录逻辑。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)