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内没有报错,并且成功还原