一个简约的element-ui的登陆页面
时间: 2023-09-09 11:04:28 浏览: 328
### 回答1:
好的,这是一个简单的 element-ui 登录页面的示例:
```
<template>
<div class="login-container">
<el-form ref="form" :model="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 type="password" v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleLogin">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
handleLogin() {
this.$refs.form.validate((valid) => {
if (valid) {
// 发送登录请求
// ...
} else {
console.log('表单验证失败')
}
})
}
}
}
</script>
<style>
.login-container {
width: 400px;
margin: 100px auto;
}
</style>
```
这个示例使用了 element-ui 的表单组件 `el-form`,表单项组件 `el-form-item`,输入框组件 `el-input` 和按钮组件 `el-button`。它还使用了表单校验功能,在用户点击登录按钮时会对表单进行验证,如果验证通过则发送登录请求,否则会在控制台输出一条
### 回答2:
一个简约的element-ui的登陆页面是一个具有简洁设计,功能齐全的用户登陆界面。该页面使用element-ui的组件和样式,提供了用户输入用户名和密码进行登陆的功能。下面是页面的主要特点:
1. 页面布局简洁:登陆页面采用简约的设计风格,通过精心选择的颜色和排版,让用户界面看起来清爽且专业。
2. 响应式设计:该页面会根据用户设备的不同自动调整布局,确保在各种屏幕尺寸下都能提供良好的用户体验。
3. 友好的表单验证:输入框会实时检查用户的输入,并提供相应的错误信息,帮助用户避免常见的输入错误。
4. 忘记密码功能:在登陆表单下方提供了忘记密码的链接,点击后会跳转到密码重置页面,让用户便捷地找回密码。
5. 社交媒体登陆:登陆页面提供了使用社交媒体账号(如微信、QQ等)快速登陆的选项,让用户无需记住繁琐的用户名密码即可登陆。
6. 登陆按钮状态反馈:在用户输入了有效的用户名和密码后,登陆按钮会变成可点击状态,点击后会校验用户信息并进行相应的登陆操作。
7. 用户注册链接:在登陆框下方提供了用户注册的链接,点击后用户可以跳转到注册页面进行新用户的注册。
总之,一个简约的element-ui的登陆页面通过清晰的布局、良好的用户体验和功能齐全的特点,为用户提供了方便快捷的登陆界面。