feat(form): 支持自定义 label slot

在 MForm / Container 上新增具名作用域插槽 label,允许使用方自定义表单项标题渲染。
Slot 作用域参数:config、type、text、prop、disabled。
类型 FormLabelSlotProps / FormSlots 提取到 schema.ts 复用。
This commit is contained in:
roymondchen 2026-05-28 16:45:11 +08:00
parent 8dae67769c
commit 285434ef3e
3 changed files with 72 additions and 24 deletions

View File

@ -22,7 +22,11 @@
:step-active="stepActive"
:size="size"
@change="changeHandler"
></Container>
>
<template v-if="$slots.label" #label="labelProps">
<slot name="label" v-bind="labelProps"></slot>
</template>
</Container>
</template>
</TMagicForm>
</template>
@ -37,12 +41,22 @@ import { setValueByKeyPath } from '@tmagic/utils';
import Container from './containers/Container.vue';
import { getConfig } from './utils/config';
import { initValue } from './utils/form';
import type { ChangeRecord, ContainerChangeEventData, FormConfig, FormState, FormValue, ValidateError } from './schema';
import type {
ChangeRecord,
ContainerChangeEventData,
FormConfig,
FormSlots,
FormState,
FormValue,
ValidateError,
} from './schema';
defineOptions({
name: 'MForm',
});
defineSlots<FormSlots>();
const props = withDefaults(
defineProps<{
/** 表单配置 */

View File

@ -25,13 +25,15 @@
<template v-else-if="type && display && !showDiff">
<TMagicFormItem v-bind="formItemProps" :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }">
<template #label>
<FormLabel
:tip="config.tip"
:type="type"
:use-label="(config as CheckboxConfig).useLabel"
:label-title="config.labelTitle"
:text="text"
></FormLabel>
<slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
<FormLabel
:tip="config.tip"
:type="type"
:use-label="(config as CheckboxConfig).useLabel"
:label-title="config.labelTitle"
:text="text"
></FormLabel>
</slot>
</template>
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
@ -77,13 +79,15 @@
:class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
>
<template #label>
<FormLabel
:tip="config.tip"
:type="type"
:use-label="(config as CheckboxConfig).useLabel"
:label-title="config.labelTitle"
:text="text"
></FormLabel>
<slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
<FormLabel
:tip="config.tip"
:type="type"
:use-label="(config as CheckboxConfig).useLabel"
:label-title="config.labelTitle"
:text="text"
></FormLabel>
</slot>
</template>
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
<component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
@ -109,13 +113,15 @@
:class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
>
<template #label>
<FormLabel
:tip="config.tip"
:type="type"
:use-label="(config as CheckboxConfig).useLabel"
:label-title="config.labelTitle"
:text="text"
></FormLabel>
<slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
<FormLabel
:tip="config.tip"
:type="type"
:use-label="(config as CheckboxConfig).useLabel"
:label-title="config.labelTitle"
:text="text"
></FormLabel>
</slot>
</template>
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
<component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
@ -152,7 +158,11 @@
:prop="itemProp"
@change="onChangeHandler"
@addDiffCount="onAddDiffCount"
></Container>
>
<template v-if="$slots.label" #label="labelProps">
<slot name="label" v-bind="labelProps"></slot>
</template>
</Container>
</template>
</template>
@ -179,6 +189,7 @@ import type {
ContainerChangeEventData,
ContainerCommonConfig,
FormItemConfig,
FormSlots,
FormState,
FormValue,
ToolTipConfigType,
@ -192,6 +203,8 @@ defineOptions({
name: 'MFormContainer',
});
defineSlots<FormSlots>();
const props = withDefaults(
defineProps<{
/** 表单值 */

View File

@ -1,3 +1,5 @@
import type { FormItemConfig } from '@tmagic/form-schema';
export * from '@tmagic/form-schema';
export interface ValidateError {
@ -14,3 +16,22 @@ export interface ContainerChangeEventData {
modifyKey?: string;
changeRecords?: ChangeRecord[];
}
/** 自定义 label slot 的作用域参数 */
export interface FormLabelSlotProps {
/** 当前表单项配置 */
config: FormItemConfig;
/** 经处理后的类型 */
type: string;
/** 经 filterFunction 处理后的 label 文案 */
text?: string;
/** 完整字段路径(包含父级前缀) */
prop: string;
/** 经 filterFunction 处理后的最终禁用状态 */
disabled?: boolean;
}
/** Form / Container 暴露的具名 slot 定义 */
export interface FormSlots {
label(_props: FormLabelSlotProps): any;
}