<template>
<div class="login-container">
<div class="login_box">
<!--头像区域-->
<div class="avatar_box">
<img src="../assets/logo.png">
</div>
<!--登陆表单区域-->
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
<!--用户名-->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
</el-form-item>
<!--密码-->
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" prefix-icon="el-icon-lock"></el-input>
</el-form-item>
<!--按钮区域-->
<el-form-item class="btns">
<el-button type="primary">登陆</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data () {
return {
loginForm: {
username: 'li',
password: 'zz'
},
// 1.在需要校验的表单上绑定校验规则：:rules="loginFormRules"；
// 2.在data中定义loginFormRules规则对象：loginFormRules：{username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
// { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }],password: []}；
// 3.在需要校验的具体表单上引入prop="username"属性。
loginFormRules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
]
}
}
},
methods: {
// 点击重置按钮，重置登陆表单
// 1.在表单中引入ref="loginFormRef"属性，loginFormRef值可以自定义；
// 2.给重置按钮绑定点击事件：@click="resetLoginForm"；
// 3.实现点击事件触发的方法，得到引入的属性值对象，调用resetFields方法，即：this.$refs.loginFormRef.resetFields()
resetLoginForm () {
this.$refs.loginFormRef.resetFields()
}
}
}
</script>
<style lang="less" scoped>
.login-container {
background-color: #2b4b6b;
height: 100%;
.avatar_box {
height: 130px;
width: 130px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
background-color: white;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
img {
height: 100%;
width: 100%;
border-radius: 50%;
background-color: #eee;
}
}
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.login_box {
background-color: #fff;
height: 300px;
width: 450px;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.btns {
/*尾部对齐*/
display: flex;
justify-content: flex-end;
}
</style>
