diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts index 8da9721d..24337118 100644 --- a/src/components/Form/src/componentMap.ts +++ b/src/components/Form/src/componentMap.ts @@ -19,6 +19,7 @@ import { Switch, TimePicker, TreeSelect, + Transfer, } from 'ant-design-vue'; import ApiRadioGroup from './components/ApiRadioGroup.vue'; import RadioButtonGroup from './components/RadioButtonGroup.vue'; @@ -31,6 +32,8 @@ import { BasicUpload, ImageUpload } from '@/components/Upload'; import { StrengthMeter } from '@/components/StrengthMeter'; import { IconPicker } from '@/components/Icon'; import { CountdownInput } from '@/components/CountDown'; +import { BasicTitle } from '@/components/Basic'; +import { CropperAvatar } from '@/components/Cropper'; const componentMap = new Map(); @@ -57,6 +60,7 @@ componentMap.set('ApiCascader', ApiCascader); componentMap.set('Cascader', Cascader); componentMap.set('Slider', Slider); componentMap.set('Rate', Rate); +componentMap.set('Transfer', Transfer); componentMap.set('ApiTransfer', ApiTransfer); componentMap.set('DatePicker', DatePicker); @@ -71,6 +75,9 @@ componentMap.set('InputCountDown', CountdownInput); componentMap.set('Upload', BasicUpload); componentMap.set('Divider', Divider); +componentMap.set('CropperAvatar', CropperAvatar); + +componentMap.set('BasicTitle', BasicTitle); export function add(compName: ComponentType, component: Component) { componentMap.set(compName, component); diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue index 7198a911..9def5509 100644 --- a/src/components/Form/src/components/FormItem.vue +++ b/src/components/Form/src/components/FormItem.vue @@ -12,7 +12,7 @@ import type { TableActionType } from '@/components/Table'; import { Col, Divider, Form } from 'ant-design-vue'; import { componentMap } from '../componentMap'; - import { BasicHelp } from '@/components/Basic'; + import { BasicHelp, BasicTitle } from '@/components/Basic'; import { isBoolean, isFunction, isNull } from '@/utils/is'; import { getSlot } from '@/utils/helper/tsxHelper'; import { @@ -367,6 +367,17 @@ {renderLabelHelpMessage()} ); + } else if (component === 'BasicTitle') { + return ( + + {renderLabelHelpMessage()} + + ); } else { const getContent = () => { return slot diff --git a/src/components/Form/src/types/index.ts b/src/components/Form/src/types/index.ts index 79e4aaab..5e19fb54 100644 --- a/src/components/Form/src/types/index.ts +++ b/src/components/Form/src/types/index.ts @@ -116,4 +116,7 @@ export type ComponentType = | 'Slider' | 'Rate' | 'Divider' - | 'ApiTransfer'; + | 'ApiTransfer' + | 'Transfer' + | 'CropperAvatar' + | 'BasicTitle'; diff --git a/src/views/demo/form/index.vue b/src/views/demo/form/index.vue index 745c7912..42bf256b 100644 --- a/src/views/demo/form/index.vue +++ b/src/views/demo/form/index.vue @@ -357,6 +357,39 @@ ], }, }, + { + field: 'field12', + component: 'BasicTitle', + label: '标题区分', + componentProps: { + line: true, + span: true, + }, + colProps: { + span: 24, + }, + }, + { + field: 'field13', + component: 'CropperAvatar', + label: '头像上传', + colProps: { + span: 8, + }, + }, + { + field: 'field14', + component: 'Transfer', + label: '穿梭框', + colProps: { + span: 8, + }, + componentProps: { + render: (item) => item.label, + dataSource: citiesOptionsData.guangdong, + targetKeys: ['1'], + }, + }, { field: 'divider-api-select', component: 'Divider',