chore: flex切换纵向时清除子容器为0的flexBasis

This commit is contained in:
zhangtao07 2024-01-30 20:02:41 +08:00
parent 5042c82fc5
commit a27ab0cfd4
2 changed files with 32 additions and 2 deletions

View File

@ -1,6 +1,7 @@
/**
* @file Flex 1:3
*/
import {PlainObject} from 'amis-core';
import {LayoutBasePlugin, PluginEvent} from 'amis-editor-core';
import {getSchemaTpl, tipedLabel} from 'amis-editor-core';
import type {
@ -87,6 +88,26 @@ export class FlexPluginBase extends LayoutBasePlugin {
panelJustify = true; // 右侧配置项默认左右展示
resetFlexBasis = (node: EditorNodeType, flexSetting: PlainObject = {}) => {
let schema = node.schema;
if (
String(flexSetting.flexDirection).includes('column') &&
!schema?.style?.height
) {
(node.children || []).forEach(child => {
if (
!child.schema?.style?.height ||
/^0/.test(child.schema?.style?.flexBasis)
) {
child.updateSchemaStyle({
flexBasis: undefined
});
}
});
}
};
panelBodyCreator = (context: BaseEventContext) => {
const curRendererSchema = context?.schema || {};
const isRowContent =
@ -127,7 +148,12 @@ export class FlexPluginBase extends LayoutBasePlugin {
label: '弹性布局设置',
direction: curRendererSchema.direction,
justify: curRendererSchema.justify || 'center',
alignItems: curRendererSchema.alignItems
alignItems: curRendererSchema.alignItems,
pipeOut: (value: any) => {
// 纵向排列的非固定高度flex容器子元素去掉为0的flexBasis
this.resetFlexBasis(context.node, value);
return value;
}
}),
getSchemaTpl('layout:flex-wrap'),

View File

@ -1498,6 +1498,8 @@ setSchemaTpl(
direction?: string;
justify?: string;
alignItems?: string;
pipeIn?: (value: any, data: any) => void;
pipeOut?: (value: any, data: any) => void;
}) => {
return {
type: 'flex-layout-setting',
@ -1507,7 +1509,9 @@ setSchemaTpl(
visibleOn: config?.visibleOn,
direction: config?.direction,
justify: config?.justify,
alignItems: config?.alignItems
alignItems: config?.alignItems,
pipeIn: config?.pipeIn,
pipeOut: config?.pipeOut
};
}
);