element ui实现登录页
时间: 2023-11-03 08:05:22 浏览: 33
可以通过以下步骤使用 Element UI 实现登录页:
1. 引入 Element UI 库和样式文件。
2. 在 HTML 中使用 Element UI 的表单组件编写登录表单。
3. 在 JavaScript 中添加表单校验逻辑,例如表单必填、邮箱格式等校验。
4. 发送登录请求并处理登录结果。
下面是一个示例代码:
HTML:
```
<el-form ref="loginForm" :model="loginForm" label-width="80px">
<el-form-item label="邮箱" prop="email">
<el-input v-model.trim="loginForm.email" placeholder="请输入邮箱"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model.trim="loginForm.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">登录</el-button>
</el-form-item>
</el-form>
```
JavaScript:
```
<script>
export default {
data() {
return {
loginForm: {
email: '',
password: ''
}
}
},
methods: {
submitForm() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 发送登录请求
}
})
}
}
}
</script>
```