elementui登录界面的详细介绍
1.效果
2.代码
<template>
<div class="container">
<el-image
:src="url"
class="img"
></el-image>
<!--
ref 属性涉及Dom 元素的获取(el-form表单对象)。
javaSrcipt 获取Dom 元素是通过:document.querySelector(".input")获取dom元素节点 。
Vue 为简化DOM获取方法提出了ref 属性和$refs 对象。一般的操作流程是ref 绑定控件,$refs 获取控件。
这里用ff来标记这个表单,this.$refs['ff']来获得表单
-->
<el-form
ref="ff"
:model="formItems"
:rules="rules">
<!--label-width:标签的宽度-->
<!--label:标签-->
<!--
Vue组件库element-ui中的Form表单组件提供了表单验证功能
通过rules属性传入验证规则
Form-Item中的prop属性设置需要校验的字段名,要和rules对象中保持一致,
也等价于要和表单的属性名称保持一致
-->
<!--el-form-item元素的prop属性绑定字段名account,表单验证时,
就会验证el-input元素绑定的变量formItems.account的值是否符合验证规则-->
<el-form-item label="账号" prop="account">
<el-input v-model="formItems.account"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<!--show-password:密码框-->
<el-input v-model="formItems.password" show-password></el-input>
</el-form-item>
<!--提交按钮-->
<el-form-item>
<el-button type="primary" @click="submitForm('ff')">Create</el-button>
<el-button @click="resetForm('ff')">Reset</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script lang="">
//导出组件
export default {
data() {
return {
//图片地址
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
//表单属性对象,和表单进行双向绑定:model
formItems: {
//账号
account: '',
// 密码
password:''
},
//验证规则对象,其中的属性名称要和表单对象的属性名称保持一致,否则会失效
rules: {
account: [
{
required: true,
//错误提示
message: '请输入账号',
//事件,只有两个选项blur / change
trigger: 'blur',
},
{
min: 3,
max: 5,
message: '账号3到5位',
trigger: 'blur',
},
],
password: [
{
required: true,
//输入框类型
message: '请示入密码',
trigger: 'blur',
},
],
},
}
},
methods: {
//提交点击事件,传入表单属性对象
submitForm(formName) {
//this.$refs[formName]获得这个表单,然后执行validate方法进行校验,
// 这里的校验是点击按钮之后才会进行的校验
this.$refs['ff'].validate((valid) => {
if (valid) {
//获得正确的属性
console.log(this.formItems.account+":"+this.formItems.password)
} else {
console.log('error submit!!');
return false
}
})
},
//重置点击事件
resetForm(formName) {
this.$refs[formName].resetFields()
},
},
}
</script>
<style>
.container{
position: absolute;
left: 50%;
top: 50%;
/*向左和上偏移半个身位*/
transform: translate(-50%, -50%);
background:
padding: 30px;
}
.container .img{
width: 100px;
height: 100px;
margin-bottom: 20px;
border-radius:50%;
}
</style>