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

fix(form): label width为0时隐藏label

Browse Source
This commit is contained in:
roymondchen 2022-05-13 20:14:10 +08:00 committed by jia000
parent 27a1ff8527
commit 28d3ea0959
2 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,15 +25,16 @@
:prop="itemProp" :prop="itemProp"
:step-active="stepActive" :step-active="stepActive"
:expand-more="expand" :expand-more="expand"
:label-width="config.labelWidth || labelWidth" :label-width="itemLabelWidth"
@change="onChangeHandler" @change="onChangeHandler"
></component> ></component>
<template v-else-if="type && display"> <template v-else-if="type && display">
<el-form-item <el-form-item
:style="config.tip ? 'flex: 1' : ''" :style="config.tip ? 'flex: 1' : ''"
:class="{ hidden: itemLabelWidth === 0 || !config.text }"
:prop="itemProp" :prop="itemProp"
:label-width="config.text ? config.labelWidth || labelWidth : '0'" :label-width="itemLabelWidth"
:rules="rule" :rules="rule"
> >
<template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template> <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
@ -88,7 +89,7 @@
:size="size" :size="size"
:step-active="stepActive" :step-active="stepActive"
:expand-more="expand" :expand-more="expand"
:label-width="config.labelWidth || labelWidth" :label-width="itemLabelWidth"
:prop="itemProp" :prop="itemProp"
@change="onChangeHandler" @change="onChangeHandler"
></m-form-container> ></m-form-container>
@ -188,6 +189,8 @@ export default defineComponent({
return displayFunction(mForm, props.config.display, props); return displayFunction(mForm, props.config.display, props);
}); });
const itemLabelWidth = computed(() => props.config.labelWidth || props.labelWidth);
watchEffect(() => { watchEffect(() => {
expand.value = props.expandMore; expand.value = props.expandMore;
}); });
@ -263,6 +266,7 @@ export default defineComponent({
itemProp, itemProp,
items, items,
display, display,
itemLabelWidth,
tagName, tagName,
rule, rule,
tooltip, tooltip,

41
packages/form/src/theme/form.scss
View File

@ -2,29 +2,36 @@
.fade-leave-active { .fade-leave-active {
transition: opacity 0.5s; transition: opacity 0.5s;
} }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0; opacity: 0;
} }
.m-form, .m-form {
.m-form-panel.el-card .el-card__body { .m-form-tip {
color: #333; color: rgba(0, 0, 0, 0.45);
background-color: #fff; font-size: 12px;
} transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.m-form .m-form-tip { .m-form-schematic {
color: rgba(0, 0, 0, 0.45); max-width: 50%;
font-size: 12px; height: 100%;
transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1); }
}
.m-form .m-form-schematic { .el-table {
max-width: 50%; .cell > div.m-form-container {
height: 100%; display: block;
} }
}
.el-table { .el-tabs {
.cell > div.m-form-container { margin-bottom: 10px;
display: block; }
.el-form-item.hidden {
.el-form-item__label {
display: none;
}
} }
} }