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.基础版本

组件引入挂载

//引入form组件
import myForm from "./components/myForm/Form.vue";

2.复制UI到封装组件 修改无误 可以出现表单

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

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

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

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

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

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

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

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

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

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

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

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


// 下来菜单具有的option


最终修改完的下拉菜单
//定义组件props
interface propTypes {
formData: any;
formConfig: Array<{
name: string;
placeholder?: string;
label?: string;
key: string;
children?: Array<{
label?: string;
value?: string;
}>;
}>;
}
defineProps();

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