elementui登录页面
时间: 2023-07-27 21:07:03 浏览: 45
以下是使用 ElementUI 实现的一个简单登录页面的示例代码:
```html
<template>
<div class="login-container">
<el-form ref="form" :model="form" :rules="rules" class="login-form">
<h3 class="login-title">用户登录</h3>
<el-form-item prop="username">
<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="form.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>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
password: ''
},
rules: {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// TODO:处理登录逻辑
console.log('登录成功')
} else {
console.log('登录失败')
return false
}
})
}
}
}
</script>
<style scoped>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f7fa;
}
.login-form {
width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.login-title {
font-size: 20px;
text-align: center;
margin-bottom: 20px;
}
</style>
```
该示例中使用了 `el-form`、`el-form-item`、`el-input` 和 `el-button` 等 ElementUI 的组件来实现登录表单。其中,`el-form` 组件用于包裹整个表单,`el-form-item` 组件用于包裹每个表单项,`el-input` 组件用于输入框,`el-button` 组件用于提交按钮。同时,使用了表单验证功能,如果表单验证通过,则会调用处理登录逻辑的函数。你可以根据自己的需求进行修改和扩展。