elementui登录页组件
时间: 2023-08-11 10:07:49 浏览: 62
Element UI 提供了一个 `el-form` 表单组件,可以用来实现登录页面。下面是一个简单的示例代码:
```
<template>
<div class="login-page">
<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" @click="handleSubmit">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
loginRules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
}
},
methods: {
handleSubmit() {
this.$refs.loginForm.validate(valid => {
if (valid) {
// 登录逻辑
} else {
return false;
}
});
}
}
}
</script>
```
在这个示例中,我们使用了 `el-form` 组件来渲染一个表单,其中包含了两个表单项(用户名和密码),还有一个提交按钮。我们使用了 `v-model` 来绑定表单项的值,使用 `prop` 属性来指定表单项的属性名,使用 `:rules` 属性来指定表单项的验证规则。在点击提交按钮时,我们使用 `$refs.loginForm.validate()` 方法来验证表单的有效性,如果验证通过,则执行登录逻辑,否则不做任何操作。