JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-11-30 14:32:09 +08:00
Code Issues Projects Releases Wiki Activity

feat(form): tip图标放到label中去

Browse Source
This commit is contained in:
roymondchen 2025-11-19 14:37:24 +08:00
parent e418130a66
commit 97affb2bff
3 changed files with 66 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/form/src/containers/Container.vue
View File

@ -24,9 +24,16 @@
<template v-else-if="type && display && !showDiff">
<TMagicFormItem v-bind="formItemProps" :class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text }">
<template #label
><span v-html="type === 'checkbox' && !config.useLabel ? '' : text" :title="config.labelTitle"></span
></template>
<template #label>
<FormLabel
:tip="config.tip"
:type="type"
:use-label="config.useLabel"
:label-title="config.labelTitle"
:text="text"
></FormLabel>
</template>
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
<component
v-bind="fieldsProps"
@ -52,7 +59,7 @@
></component>
</TMagicFormItem>
<TMagicTooltip v-if="config.tip" placement="left">
<TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
<TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
<template #content>
<div v-html="config.tip"></div>
@ -67,7 +74,15 @@
v-bind="formItemProps"
:class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
>
<template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
<template #label>
<FormLabel
:tip="config.tip"
:type="type"
:use-label="config.useLabel"
:label-title="config.labelTitle"
:text="text"
></FormLabel>
</template>
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
<component v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
<template #content>
@ -78,7 +93,7 @@
<component v-else v-bind="fieldsProps" :is="tagName" :model="lastValues" @change="onChangeHandler"></component>
</TMagicFormItem>
<TMagicTooltip v-if="config.tip" placement="left">
<TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
<TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
<template #content>
<div v-html="config.tip"></div>
@ -91,7 +106,15 @@
:style="config.tip ? 'flex: 1' : ''"
:class="{ 'tmagic-form-hidden': `${itemLabelWidth}` === '0' || !text, 'show-diff': true }"
>
<template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
<template #label>
<FormLabel
:tip="config.tip"
:type="type"
:use-label="config.useLabel"
:label-title="config.labelTitle"
:text="text"
></FormLabel>
</template>
<TMagicTooltip v-if="tooltip.text" :placement="tooltip.placement">
<component v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
<template #content>
@ -102,7 +125,7 @@
<component v-else v-bind="fieldsProps" :is="tagName" :model="model" @change="onChangeHandler"></component>
</TMagicFormItem>
<TMagicTooltip v-if="config.tip" placement="left">
<TMagicTooltip v-if="config.tip && type === 'checkbox' && !config.useLabel" placement="top">
<TMagicIcon style="line-height: 40px; margin-left: 5px"><warning-filled /></TMagicIcon>
<template #content>
<div v-html="config.tip"></div>
@ -157,6 +180,8 @@ import type {
} from '../schema';
import { display as displayFunction, filterFunction, getRules } from '../utils/form';
import FormLabel from './FormLabel.vue';
defineOptions({
name: 'MFormContainer',
});

25
packages/form/src/containers/FormLabel.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<span style="display: inline-flex; align-items: center">
<span v-html="type === 'checkbox' && !useLabel ? '' : text" :title="labelTitle"></span>
<TMagicTooltip v-if="tip && (type !== 'checkbox' || useLabel)" placement="top">
<TMagicIcon style="margin-left: 5px; display: flex"><warning-filled /></TMagicIcon>
<template #content>
<div v-html="tip"></div>
</template>
</TMagicTooltip>
</span>
</template>
<script setup lang="ts">
import { WarningFilled } from '@element-plus/icons-vue';
import { TMagicIcon, TMagicTooltip } from '@tmagic/design';
defineProps<{
tip?: string;
type?: string;
useLabel?: boolean;
text?: string;
labelTitle?: string;
}>();
</script>

8
packages/form/src/containers/Panel.vue
View File

@ -103,4 +103,12 @@ const changeHandler = (v: any, eventData: ContainerChangeEventData) => {
emit('change', props.model, eventData);
};
const onAddDiffCount = () => emit('addDiffCount');
defineExpose({
getExpand: () => expand.value,
setExpand: (v: boolean) => {
expand.value = v;
},
});
</script>