20vue登录-表单数据重置

pdemo： Happy every day！ Go!
 农历 庚子 鼠年 五月初二 -- 2020年6月22日 - 周一 -  21:44

说明：个人学习整理

视频参考链接：https://www.bilibili.com/video/BV1EE411B7SU?p=20

---

Vue 登录输入框--表单数据重置
elment-ui 内 Form表单的resetFileds Methods
1 form 内数据重置 表单添加ref引用 ref="loginFormRef", 值就是组件的实例对象
2 在重置button上添加click函数绑定 @click="resetLogin", resetLogin 是一个方法 
3 在export defautl内添加resetLogin方法，并且通过this.$ref.loginFormRef.resetFileds() 重置数据和验证
4.code 和 截图： 红色表示是这次代码的增加点
4.1 Login.vue
<template>
    <div class="login_container">
        <div class="login_box">
            <!--  -->
            <div class="avatar_box">
                <img src="../assets/login_head.png" alt="">
            </div>
            <!-- login table place -->
            <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="iconfont icon-yonghu"></el-input>
                </el-form-item>
                <!-- 密码输入 -->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" prefix-icon="iconfont icon-mima" type="password"></el-input>
                </el-form-item>
                <!-- 按钮 登录/重置-->
                <el-form-item class="btan">
                    <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: {
                // 设置默认显示未pdemo和密码未abc
                username: 'pdemo',
                password: 'abc'
            },
            // 登录输入框表单验证对象
            LoginFormRules: {
                // 用户名验证
                username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                // login password  check
                password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ]

            }
        }
    },
    methods: {
        resetLoginForm () {
            // console.log(this)
            this.$refs.loginFormRef.resetFields();
        }
    },
};
</script>

<style lang="less" scoped>
.login_container {
    background-color:bisque;
    height: 100%;
}

.login_box {
    width: 450px;
    height: 300px;
    background-color:rgb(240, 240, 255);
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .avatar_box {
        height: 130px;
        width: 130px;
        border: 1px solid #eeeeee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #dddddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgb(240, 240, 255);
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: aqua;

        }
    }
}

.login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.btan {
    display: flex;
    justify-content: flex-end;
}
</style>

效果：
手动多输入点信息：

然后点击重置： console内没有报错，并且成功还原