diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue index 5bfa1b96e..af831cce4 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue @@ -48,6 +48,7 @@ const { modelPropName, renderComponentContent, rules, + help, } = defineProps< Props & { commonComponentProps: MaybeComponentProps; @@ -174,6 +175,18 @@ const computedProps = computed(() => { }; }); +// 自定义帮助信息 +const computedHelp = computed(() => { + return help ? onHelpFunc : undefined; +}); + +const onHelpFunc = () => { + if (!help) { + return undefined; + } + return isFunction(help) ? help(values.value, formApi!) : help; +}; + watch( () => computedProps.value?.autofocus, (value) => { @@ -322,7 +335,7 @@ onUnmounted(() => { labelClass, ) " - :help="help" + :help="computedHelp" :colon="colon" :label="label" :required="shouldRequired && !hideRequiredMark" diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index b5c5a4fbc..2238abd1c 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -67,6 +67,14 @@ export type FormActions = FormContext; export type CustomRenderType = (() => Component | string) | string; +// 动态渲染参数 +export type CustomParamsRenderType = + | (( + value: Partial>, + actions: FormActions, + ) => Component | string) + | string; + export type FormSchemaRuleType = | 'required' | 'selectRequired' @@ -254,7 +262,7 @@ export interface FormSchema< /** 字段名 */ fieldName: string; /** 帮助信息 */ - help?: CustomRenderType; + help?: CustomParamsRenderType; /** 是否隐藏表单项 */ hide?: boolean; /** 表单项 */ diff --git a/playground/src/views/examples/form/basic.vue b/playground/src/views/examples/form/basic.vue index 81fda07e1..fd96ff4d0 100644 --- a/playground/src/views/examples/form/basic.vue +++ b/playground/src/views/examples/form/basic.vue @@ -281,6 +281,8 @@ const [BaseForm, baseFormApi] = useVbenForm({ { component: 'DatePicker', fieldName: 'datePicker', + help: (values) => + [`这是一个可输出其他字段值的帮助信息${values?.rate}`].map((v) => h('p', v)), label: '日期选择框', }, {