elementui登录界面的详细介绍

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: #70e53f;
        padding: 30px;

    }

    .container .img{
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
        border-radius:50%;
    }

</style>