一个小问题的简单记录,一个登录组件需要实现重置效果。
element-plus官网上通过resetFields
重置表单的代码使用Typescript语法滴,并不是我需要的。官网部分代码如下:
// 首先el-form 必须设置: ref , :model, :rules 三个属性
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
name: 'Hello',
region: '',
// ... 其余数据省略
})
const rules = reactive<FormRules>({
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
],
// 其余规则省略
})
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
千百次搜索,终于找到JS的代码了,下面是登录组件完整代码
还有必须要提醒的,重置是将数据还原成初始值,不是置空!!!就是因为这个,我一度以为代码没效果,疯狂找其他方案
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像区域 -->
<div class="avatr_box">
<img src="../assets/logo.png" alt="" />
</div>
<!-- 登录表单区域 -->
<el-form
ref="loginFormRef"
:model="loginForm"
:rules="loginFormRules"
label-width="0px"
class="login_form"
>
<!-- 用户名 -->
<el-form-item label="" prop="username">
<el-input v-model="loginForm.username" prefix-icon="User" />
</el-form-item>
<!-- 密码 -->
<el-form-item label="" prop="password">
<el-input
v-model="loginForm.password"
type="password"
prefix-icon="Lock"
/>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item class="btns">
<el-button type="primary">登录</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from "vue";
const loginFormRules = {
username: [
// 验证用户名是否合法
{
required: true,
message: "请输入用户名",
trigger: "blur",
},
{
min: 3,
max: 10,
message: "长度在 3 到 10 个字符之间",
trigger: "blur",
},
],
password: [
{
required: true,
message: "请输入密码",
trigger: "blur",
},
{
min: 6,
max: 15,
message: "长度在 6 到 15 个字符之间",
trigger: "blur",
},
],
};
const loginForm = reactive({
username: "zs",
password: "123",
});
const loginFormRef = ref(null);
// 点击重置按钮,重置登录表单
const resetLoginForm = () => {
loginFormRef.value.resetFields();
};
</script>
<style lang="less" scoped>
.login_container {
background-color: #2b4b6b;
height: 100%;
}
.login_box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 450px;
height: 300px;
background-color: #fff;
border-radius: 3px;
}
.avatr_box {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
background-color: #fff;
img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
.btns {
// flex-end 无效
display: flex;
justify-content: flex-end;
}
</style>