xueyitt 1 day ago
committed by GitHub
parent
commit
d6828dee80
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 15
      packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
  2. 10
      packages/@core/ui-kit/form-ui/src/types.ts
  3. 2
      playground/src/views/examples/form/basic.vue

15
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

@ -48,6 +48,7 @@ const {
modelPropName, modelPropName,
renderComponentContent, renderComponentContent,
rules, rules,
help,
} = defineProps< } = defineProps<
Props & { Props & {
commonComponentProps: MaybeComponentProps; 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( watch(
() => computedProps.value?.autofocus, () => computedProps.value?.autofocus,
(value) => { (value) => {
@ -322,7 +335,7 @@ onUnmounted(() => {
labelClass, labelClass,
) )
" "
:help="help" :help="computedHelp"
:colon="colon" :colon="colon"
:label="label" :label="label"
:required="shouldRequired && !hideRequiredMark" :required="shouldRequired && !hideRequiredMark"

10
packages/@core/ui-kit/form-ui/src/types.ts

@ -67,6 +67,14 @@ export type FormActions = FormContext<GenericObject>;
export type CustomRenderType = (() => Component | string) | string; export type CustomRenderType = (() => Component | string) | string;
// 动态渲染参数
export type CustomParamsRenderType =
| ((
value: Partial<Record<string, any>>,
actions: FormActions,
) => Component | string)
| string;
export type FormSchemaRuleType = export type FormSchemaRuleType =
| 'required' | 'required'
| 'selectRequired' | 'selectRequired'
@ -254,7 +262,7 @@ export interface FormSchema<
/** 字段名 */ /** 字段名 */
fieldName: string; fieldName: string;
/** 帮助信息 */ /** 帮助信息 */
help?: CustomRenderType; help?: CustomParamsRenderType;
/** 是否隐藏表单项 */ /** 是否隐藏表单项 */
hide?: boolean; hide?: boolean;
/** 表单项 */ /** 表单项 */

2
playground/src/views/examples/form/basic.vue

@ -281,6 +281,8 @@ const [BaseForm, baseFormApi] = useVbenForm({
{ {
component: 'DatePicker', component: 'DatePicker',
fieldName: 'datePicker', fieldName: 'datePicker',
help: (values) =>
[`这是一个可输出其他字段值的帮助信息${values?.rate}`].map((v) => h('p', v)),
label: '日期选择框', label: '日期选择框',
}, },
{ {

Loading…
Cancel
Save