一、组件化封装

1.首先创建一个form文件夹，将搜索框组件的内容全部写在这个里面，然后再在需要的页面直接引入相应的组件即可

2.首先先在goods.vue文件里面写对应的文本数组formItems，将所定义的类型IFormItem引用进去，这个里面写的字段都是对应goods.vue文件里面的文本数组formItems里面所拥有的字段

 const formItems: IFormItem[] = [{field: "id",type: "input",label: "id",placeholder: "请输入账号"},{field: "realname",type: "input",label: "姓名",placeholder: "请输入姓名"},{field: "cellphone",type: "input",label: "电话号码",placeholder: "请输入电话号码"}]

3.然后在form.vue文件里面去判断获取到的prop的数据，也就是父组件goods.vue传给子组件form.vue的formItems，根据里面写的type的类型去进行组件的匹配

form.vue

4.可以选择在form.vue里面接收相应的样式itemStyle和labelWidth，或者直接在form.vue里面给他们默认值，然后绑定到上面对应的组件上，就能进行响应

5.一开始可以将所有的itemLayout、formItems、lableWidth和colLayout全部由父组件传给子组件，但是这样的话hy-form组件里面要传的东西就太多了，所以可以考虑把上面这些数据全部放在一个新变量里面，然后给这个新变量定义一个类型，这个类型里面就包括了这些变量值

6.虽然这样一定程度上简化了代码，但是goods.vue文件里面的代码还是太多了，为了更加简便，我们可以把formConfig单独抽离到一个文件里面，然后再在goods.vue里面去引用

search.config.ts

import { IForm } from '@/base-ui/form'
export const searchformConfig: IForm = {labelWidth: '120px',itemStyle: {padding: '10px 40px'},colLayout: {span: 8},formItems: [{field: "id",type: "input",label: "id",placeholder: "请输入商品id"},{field: "realname",type: "input",label: "商品名称",placeholder: "请输入商品名称"},{field: "cellphone",type: "input",label: "商品编号",placeholder: "请输入商品编号"}]
}