--- group: title: 通用组件 order: 2 title: StandardDrawer order: 3 toc: content --- # StandardDrawer 通用抽屉 ## 代码演示 ### 基本使用 ## 配置化表单用法 ## API | 参数 | 说明 | 类型 | 默认值 | 参考值 | |----------|------------------------------------------|-------------|-------|-------| | title | 抽屉标题 | String | - |- | | size | 抽屉大小 | String | sm |可选:`sm`,`default`,`lg`,`large`,`xlg` , [说明](#size)| | type | 抽屉类型 | String | - |, `form`, `stepForm`，`tabForm`,`gridForm`[类型说明](#type-类型说明) | | onSubmit | 点击保存（确认）,type为`form`时，参数中才有fields | Function(fields) | - |- | | onCancel | 取消,type为`form`时才有，且优先级低于`onClose` | Function()| - |- | | onClose | 取消,优先级高于`onCancel` | Function()| - |- | | footerButtonGroup | 抽屉按钮组，自己定义配置底部按钮组 | Function(modalForm,modalProps)\| Array\|ReactNode\| | - | Array字段参考[footerBtnGroup API](#footerbtngroup-api)| | footer | 同官网配置，底部内容，当不需要默认底部按钮时，可以设为 footer={null} | | - |- | | formItemGroup | 表单组 | Array | Array字段参考[formItemGroup API](#formitemgroup-api)| | itemGroupConfig | 表单组配置项| Object | | Array字段查看 [itemGroup API](/components/item-group#api) | | formPrefix | 表单组前置结构 | Function(modalForm, modalProps, forceUpdateForm)| - |modalForm是表示form实例, updateForm指自定义表单变化，需要强制触发更新表单实例 | | formPostfix | 表单组后置结构 | Function(modalForm, modalProps, forceUpdateForm)| - |- | | confirmText/okText | 保存按钮文本 | String | '确认' | | | cancelText | 取消按钮文本 | String | '取消' | | | confirmButtonProps/okButtonProps | ok 按钮 props | ButtonProps | -| | | cancelButtonProps | cancel 按钮 props | ButtonProps |-| | | fieldStatus | 配置化表单展示状态：“viewOnly 只显示值不显示控件”或者"disabled:控件禁用" | String | 'default' | | | initialValues | type="form"条件下的表单组默认值配置 | Object | - | | | getFormFields | type="form"条件下获取当前抽屉内表单字段值及表单实例 | Function(fields,form) | - | | | formLayout | type="form"条件下的表单布局 | String | `horizontal`、`vertical`| | | stepsConfig | type="stepForm"使用,设置当前步骤数等配置，参考官方Steps组件 | Object | -| | displayLayout |type="normal"之外使用,自定义标签与控件栅格值 | Object[参考](#displaylayout-配置值) | |{labelCol: { span: 7 }, wrapperCol: { span: 15 }} | ### formItemGroup API | 参数字段 | 说明 | 类型 |必选项| 参考值| |----------|------|-------------|------|------| | label | 标签名称/条件名称 | String 或 ReactNode | 是 |- | | type | 控件类型 | String | 是 | 可以选择 `input`/`select`/`custom`等，参考[可选值](/field/field-component#type-可选值) | | componentStyle | 表单域样式,可设置宽度等 | Object | 否 | | | extra | 跟在表单域后的结构 | Function ReactNode | 否 | - | | filedName | 控件名称 | String | 是 |参考 [getFieldDecorator(id, options) 参数](https://ant.design/components/form-cn/#getFieldDecorator(id,-options)-参数) | | selectOptions | 选项列表 | Array | 否 | select/radio/checkbox等使用 ,选项值：{'label': 'xxx', value: 'xxx'}| | customRender | 必须结合 type="custom"使用 | Function(itemForm,itemData,fieldStatus, forceUpdateForm) ReactNode | 否 | itemForm表单获取值之类要添加 itemForm.current.getFieldsValue() | | required | 可结合 type="custom"使用,自定义校验规则时，可在label标签前显示* | Boolean| 否 | - | | isHide | 是否隐藏当前配置的组件(需要结合`protoFormItem.shouldUpdate`使用) | Boolean/Function(fieldValues, form)| 否 | fieldValues指当前配置表单内部的所有控件值，form指当前弹窗内部的表单实例 | | protoConfig | 原生的表单控件配置或者antd对应的配置参数,例如配置 protoConfig: { disabled: true }| Object| 否 | - | | protoFormItem | Form.Item 原始API | Objcet | 否|[官网API](https://ant.design/components/form-cn/#Form.Item) | | fields | type=`stepForm`使用 | Array| 是 | 参数集合同`formItemGroup`，但是不包含`fields`,`actions` | | actions |type=`stepForm `使用| Array || 对象值[actions API](#actions-api) 或者`ReactNode` | | transform |提交值格式转换| `(values)=> {}`|否| `transform: (value) => { return { startTime: value[0],endTime: value[1],};}` | | 其他 | 其他配置项目可查看 [itemGroup API](/components/item-group#itemgroup-api) | - |- |-| ### footerBtnGroup API | 参数字段 | 说明 | 类型 |必选项| |----------|------|-------------|------| | name | 按钮文本 | String | 是 | | icon | 图标类名 | String/ReactNode/Array（['speci', 'plus']，至少传一个前缀名，一个图标类名两个值） | 否 | | type | 按钮类型 | String | 否 | | ghost | 幽灵属性，使按钮背景透明 | Boolean | 否 | | fn | 按钮点击事件 | Function | 否 | | isHide | 隐藏按钮 | Boolean | 否 | | 其他 | [参考官网](https://ant.design/components/button-cn/#API) | Boolean | 否 | ### actions API | 参数字段 | 说明 | 类型 |必选项| |----------|------|-------------|------| | name | 按钮文本 | String | 是 | | action | 默认控制类型,指定next,或submit将会在内部默认执行配置表单的校验（不包括type="custom"内相关的表单) | String（可取值'prev','next','submit','cancel'） | 否 | | icon | 图标类名 | String/ReactNode/Array（['speci', 'plus']，至少传一个前缀名，一个图标类名两个值） | 否 | | type | 按钮类型 | String | 否 | | fn | 按钮点击事件 | Function(item,form) | 否 | ### type 类型说明 - `form`: 配置表单弹窗 - `stepForm`: 带步骤表单弹窗 - `tabForm`：带标签页表单结构 - `gridForm`：带栅格表单结构 ### size * `general.drawerSize`抽屉梯度大小及对应的表单栅格 * 栅格数同步`columnNumber`/`size` | 宽度值 |抽屉尺寸px | 栅格数 | formLayout栅格比 | formBlockLayout(占用整行) | |----------|---|------------------------------------------|-------------|-------| |xlg|960或（top与bottom时为100vh)|3|`9:15`【{labelCol: {span: 9},wrapperCol: {span: 15}}】|`3:21`【{labelCol: {span: 3},wrapperCol: {span: 21}}】| |lg/large|768|2|`8:14`【{labelCol: {span:8},wrapperCol: {span: 14}}】|`4:19`【{labelCol: {span: 4},wrapperCol: {span:19}}】| |md|576|1|`7:15`【{labelCol: {span:7},wrapperCol: {span: 15}}】|`7:15`【{labelCol: {span: 7},wrapperCol: {span:15}}】| |sm/default|384|1|`7:15`【{labelCol: {span:7},wrapperCol: {span: 15}}】|`7:15`【{labelCol: {span: 7},wrapperCol: {span:15}}】| ### displayLayout 配置值 配置时参照[size](#size) **1.针对 formLayout='horizontal'** > 配置值1: 栅格将应用到`display:'side'`的控件,另外有配置`display: 'block'`将会使用原来默认的栅格`general.modalSize[size].formBlockLayout` > > 配置值2: 如果想让`display: 'block'`也更改，则可以使用配置值2，分别配置side与block的栅格 **针对 formLayout='horizontal'** ```javascript // 配置值1： displayLayout={ labelCol: { span: 4 }, wrapperCol: { span: 20 }, } // 配置值2： displayLayout={ // 针对于单行多列展示配置 side: { labelCol: { span: 8}, wrapperCol: { span: 16 }, }, // 单行展1列配置 block: { labelCol: { span: 4 }, wrapperCol: { span: 20 }, } } ``` **2.针对 formLayout='vertical'** > 默认情况下，labelCol与wrapperCol不管在display='size'还是display='block'下都是24 >