fix: DynamicColumn子控件宽度覆盖为100%+修复间隙和覆盖问题

- _fix_children: MutationObserver监听子控件添加,强制width:100%+minWidth:0
- 解决子控件cwidth设置的固定像素宽度超出grid cell导致重叠
- align-items:start防止grid items垂直拉伸
- col_cgap默认值统一为1(原构造函数设0.5但set_column_width用0.1)
- 移除console.log调试输出
This commit is contained in:
Hermes Agent 2026-06-18 16:43:48 +08:00
parent 0686a9ae86
commit 579d60b49b

View File

@ -15,22 +15,34 @@ bricks.DynamicColumn = class extends bricks.Layout {
opts.col_cwidth = 20;
}
}
opts.col_cgap = opts.col_cgap || 0.5;
opts.col_cgap = opts.col_cgap || 1;
opts.mobile_cols = opts.mobile_cols|| 1;
super(opts);
this.set_style('display', 'grid');
// this.set_column_width();
this.set_style('align-items', 'start');
this.bind('on_parent', this.set_column_width.bind(this));
this.bind('resize', this.set_column_width.bind(this));
if (this.cwidth){
bricks.app.bind('charsize', this.set_column_width.bind(this));
}
// Watch for new children added and fix their width
this._observer = new MutationObserver(this._fix_children.bind(this));
this._observer.observe(this.dom_element, {childList: true, subtree: false});
}
_fix_children(){
var children = this.dom_element.children;
for (var i=0; i<children.length; i++){
var el = children[i];
el.style.width = '100%';
el.style.minWidth = '0';
el.style.boxSizing = 'border-box';
}
}
set_column_width(){
var cw;
var cols;
var gap;
gap = bricks.app.charsize * (this.col_cgap || 0.1);
gap = bricks.app.charsize * (this.col_cgap || 1);
var width = bricks.app.screenWidth();
var height = bricks.app.screenHeight();
if (bricks.is_mobile() && width < height){
@ -46,6 +58,8 @@ bricks.DynamicColumn = class extends bricks.Layout {
}
this.dom_element.style.gridTemplateColumns = "repeat(auto-fill, minmax(" + cw + "px, 1fr))";
this.set_style('gap', gap + 'px');
// Fix existing children widths
this._fix_children();
}
}