form表单二次封装

1. 项目中使用Form UI库
2. 1.直接复制 到项目中直接使用
3. 2.开发者自行进行二次封装（减少代码）

Form组件二次封装考虑组件构成

1. form组件：
2. input text passworld
3. select
4. checkbox
5. radio
6. 文本域
7. 日期

实现form组件二次封装

1.基础版本
<script lang="ts" setup></script>

<template>
<div>Form</div>
</template>

组件引入挂载

//引入form组件
import myForm from "./components/myForm/Form.vue";
<!-- 实现form封装 -->
<myForm></myForm>

2.复制UI到封装组件 修改无误 可以出现表单
<template>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="Approved by">
<el-input v-model="formInline.user" placeholder="Approved by" />
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="formInline.region" placeholder="Activity zone">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">Query</el-button>
</el-form-item>
</el-form>
</template>

3.分析出对应的位置 开始抽离组件
如果需要产生多个form表单 ---产生多个el-form-item----需要一个集合数据来循环渲染form-item

结合form表单属性继续分析：
el-form-item lable 显示文本
内部标签 el-input v-model 绑定数据 placeholder 文本提示 等等

首先确认 一个集合 []
配置内部属性
在结合 form表单 v-model 定义一个表单数据对象

修改二次封装组件代码使用配置产生form自动生成

<script lang="ts" setup>
//定义组件props
interface propTypes {
formConfig: Array<{
name: string;
placeholder?: string;
label?: string;
}>;
}
defineProps<propTypes>();
</script>

<template>
<el-form :inline="true" class="demo-form-inline">
<!-- 循环遍历产生Form组件 -->
<template v-for="(item, index) in formConfig">
<el-form-item :label="item.label">
<el-input :placeholder="item.placeholder" />
</el-form-item>
</template>
</el-form>
</template>

4.分析简易封装之后的代码 得知 el-input不是固定，需要根据配置中key 动态切换
可以使用 vue中component 组件的动态挂载 来完成

<script lang="ts" setup>
//按需引入 UI 组件
import { ElInput } from "element-plus";
//定义组件props
interface propTypes {
formConfig: Array<{
name: string;
placeholder?: string;
label?: string;
}>;
}
defineProps<propTypes>();
</script>

<template>
<el-form :inline="true" class="demo-form-inline">
<!-- 循环遍历产生Form组件 -->
<template v-for="(item, index) in formConfig">
<el-form-item :label="item.label">
<!-- 使用组件动态挂载 -->
<component :is="ElInput"></component>
</el-form-item>
</template>
</el-form>
</template>

5.使用配置项 动态生成form标签

<script lang="ts" setup>
import { ElInput } from "element-plus";
//定义组件props
interface propTypes {
formConfig: Array<{
name: string;
placeholder?: string;
label?: string;
}>;
}
defineProps<propTypes>();

//定义对象存储key:UI组件
interface UIComType {
[propName: string]: any;
}
let UICom: UIComType = {
ElInput: ElInput,
};
</script>

<template>
<el-form :inline="true" class="demo-form-inline">
<!-- 循环遍历产生Form组件 -->
<template v-for="(item, index) in formConfig">
<el-form-item :label="item.label">
<!-- 使用组件动态挂载 -->
<component :is="UICom[item.name]" :placeholder="item.placeholder"></component>
</el-form-item>
</template>
</el-form>
</template>

对应的配置 name
//定义form表单配置
let formConfig = [
{
name: "ElInput",
placeholder: "请输入...",
label: "姓名：",
},
];

6.完善form表单中的数据源 绑定表单v-model 数据

<script lang="ts" setup>
import { ElInput } from "element-plus";
//定义组件props
interface propTypes {
formData: any;
formConfig: Array<{
name: string;
placeholder?: string;
label?: string;
key: string;
}>;
}
defineProps<propTypes>();

//定义对象存储key:UI组件
interface UIComType {
[propName: string]: any;
}
let UICom: UIComType = {
ElInput: ElInput,
};
</script>

<template>
<el-form :inline="true" :model="formData" class="demo-form-inline">
<!-- 循环遍历产生Form组件 -->
<template v-for="(item, index) in formConfig">
<el-form-item :label="item.label">
<!-- 使用组件动态挂载 -->
<component
:is="UICom[item.name]"
v-model="formData[item.key]"
:placeholder="item.placeholder"
></component>
</el-form-item>
</template>
</el-form>
</template>

在父组件中设置form表单数据 配置key 键 获取表单键 v-model绑定数据

//定义表单对象数据
let formModule = reactive({
name: "小小",
});

watch(
formModule,
() => {
console.log("Form", formModule);
},
{ deep: true }
);
</script>

<template>
<!-- 实现form封装 -->
<myForm :form-config="formConfig" :form-data="formModule"></myForm>
<House></House>
</template>

7.form表单封装下拉菜单
//直接在封装组件内部
配置中添加下拉菜单元素
let UICom: UIComType = {
ElInput: ElInput,
ElSelect: ElSelect,
};

<component
:is="UICom[item.name]"
v-model="formData[item.key]"
:placeholder="item.placeholder"
>
// 下来菜单具有的option
<el-option label="Zone one" value="shanghai" />
</component>
最终修改完的下拉菜单
//定义组件props
interface propTypes {
formData: any;
formConfig: Array<{
name: string;
placeholder?: string;
label?: string;
key: string;
children?: Array<{
label?: string;
value?: string;
}>;
}>;
}
defineProps<propTypes>();

//定义对象存储key:UI组件
interface UIComType {
[propName: string]: any;
}
let UICom: UIComType = {
ElInput: ElInput,
ElSelect: ElSelect,
};
</script>

<template>
<el-form :inline="true" :model="formData" class="demo-form-inline">
<!-- 循环遍历产生Form组件 -->
<template v-for="(item, index) in formConfig">
<el-form-item :label="item.label">
<!-- 使用组件动态挂载 -->
<component
:is="UICom[item.name]"
v-model="formData[item.key]"
:placeholder="item.placeholder"
>
<template v-if="item.children && item.children.length">
<el-option
v-for="(its, is) in item.children"
:label="its.label"
:value="its.value!"
/>
</template>
</component>
</el-form-item>
</template>
</el-form>
</template>