mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-05-30 04:08:04 +00: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"
|
||||
: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<{
|
||||
/** 表单配置 */
|
||||
|
||||
@ -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<{
|
||||
/** 表单值 */
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user