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

.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;
}

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

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