mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-06-04 10:58:33 +08:00
feat(form): 支持自定义 label slot
在 MForm / Container 上新增具名作用域插槽 label,允许使用方自定义表单项标题渲染。 Slot 作用域参数:config、type、text、prop、disabled。 类型 FormLabelSlotProps / FormSlots 提取到 schema.ts 复用。
This commit is contained in:
parent
8dae67769c
commit
285434ef3e
@ -22,7 +22,11 @@
|
|||||||
:step-active="stepActive"
|
:step-active="stepActive"
|
||||||
:size="size"
|
:size="size"
|
||||||
@change="changeHandler"
|
@change="changeHandler"
|
||||||
></Container>
|
>
|
||||||
|
<template v-if="$slots.label" #label="labelProps">
|
||||||
|
<slot name="label" v-bind="labelProps"></slot>
|
||||||
|
</template>
|
||||||
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
</TMagicForm>
|
</TMagicForm>
|
||||||
</template>
|
</template>
|
||||||
@ -37,12 +41,22 @@ import { setValueByKeyPath } from '@tmagic/utils';
|
|||||||
import Container from './containers/Container.vue';
|
import Container from './containers/Container.vue';
|
||||||
import { getConfig } from './utils/config';
|
import { getConfig } from './utils/config';
|
||||||
import { initValue } from './utils/form';
|
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({
|
defineOptions({
|
||||||
name: 'MForm',
|
name: 'MForm',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
defineSlots<FormSlots>();
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
/** 表单配置 */
|
/** 表单配置 */
|
||||||
|
|||||||
@ -25,13 +25,15 @@
|
|||||||
<template v-else-if="type && display && !showDiff">
|
<template v-else-if="type && display && !showDiff">
|
||||||
<TMagicFormItem v-bind="formItemProps" :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }">
|
<TMagicFormItem v-bind="formItemProps" :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }">
|
||||||
<template #label>
|
<template #label>
|
||||||
<FormLabel
|
<slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
|
||||||
:tip="config.tip"
|
<FormLabel
|
||||||
:type="type"
|
:tip="config.tip"
|
||||||
:use-label="(config as CheckboxConfig).useLabel"
|
:type="type"
|
||||||
:label-title="config.labelTitle"
|
:use-label="(config as CheckboxConfig).useLabel"
|
||||||
:text="text"
|
:label-title="config.labelTitle"
|
||||||
></FormLabel>
|
:text="text"
|
||||||
|
></FormLabel>
|
||||||
|
</slot>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
|
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
|
||||||
@ -77,13 +79,15 @@
|
|||||||
:class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
|
:class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
|
||||||
>
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
<FormLabel
|
<slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
|
||||||
:tip="config.tip"
|
<FormLabel
|
||||||
:type="type"
|
:tip="config.tip"
|
||||||
:use-label="(config as CheckboxConfig).useLabel"
|
:type="type"
|
||||||
:label-title="config.labelTitle"
|
:use-label="(config as CheckboxConfig).useLabel"
|
||||||
:text="text"
|
:label-title="config.labelTitle"
|
||||||
></FormLabel>
|
:text="text"
|
||||||
|
></FormLabel>
|
||||||
|
</slot>
|
||||||
</template>
|
</template>
|
||||||
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
|
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
|
||||||
<component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
|
<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 }"
|
:class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
|
||||||
>
|
>
|
||||||
<template #label>
|
<template #label>
|
||||||
<FormLabel
|
<slot name="label" :config="config" :type="type" :text="text" :prop="itemProp" :disabled="disabled">
|
||||||
:tip="config.tip"
|
<FormLabel
|
||||||
:type="type"
|
:tip="config.tip"
|
||||||
:use-label="(config as CheckboxConfig).useLabel"
|
:type="type"
|
||||||
:label-title="config.labelTitle"
|
:use-label="(config as CheckboxConfig).useLabel"
|
||||||
:text="text"
|
:label-title="config.labelTitle"
|
||||||
></FormLabel>
|
:text="text"
|
||||||
|
></FormLabel>
|
||||||
|
</slot>
|
||||||
</template>
|
</template>
|
||||||
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
|
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
|
||||||
<component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
|
<component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
|
||||||
@ -152,7 +158,11 @@
|
|||||||
:prop="itemProp"
|
:prop="itemProp"
|
||||||
@change="onChangeHandler"
|
@change="onChangeHandler"
|
||||||
@addDiffCount="onAddDiffCount"
|
@addDiffCount="onAddDiffCount"
|
||||||
></Container>
|
>
|
||||||
|
<template v-if="$slots.label" #label="labelProps">
|
||||||
|
<slot name="label" v-bind="labelProps"></slot>
|
||||||
|
</template>
|
||||||
|
</Container>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -179,6 +189,7 @@ import type {
|
|||||||
ContainerChangeEventData,
|
ContainerChangeEventData,
|
||||||
ContainerCommonConfig,
|
ContainerCommonConfig,
|
||||||
FormItemConfig,
|
FormItemConfig,
|
||||||
|
FormSlots,
|
||||||
FormState,
|
FormState,
|
||||||
FormValue,
|
FormValue,
|
||||||
ToolTipConfigType,
|
ToolTipConfigType,
|
||||||
@ -192,6 +203,8 @@ defineOptions({
|
|||||||
name: 'MFormContainer',
|
name: 'MFormContainer',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
defineSlots<FormSlots>();
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
/** 表单值 */
|
/** 表单值 */
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
import type { FormItemConfig } from '@tmagic/form-schema';
|
||||||
|
|
||||||
export * from '@tmagic/form-schema';
|
export * from '@tmagic/form-schema';
|
||||||
|
|
||||||
export interface ValidateError {
|
export interface ValidateError {
|
||||||
@ -14,3 +16,22 @@ export interface ContainerChangeEventData {
|
|||||||
modifyKey?: string;
|
modifyKey?: string;
|
||||||
changeRecords?: ChangeRecord[];
|
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;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user