yumoqing/bricks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- _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
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
bricks/dynamiccolumn.js
View File

@ -15,22 +15,34 @@ bricks.DynamicColumn = class extends bricks.Layout {
opts.col_cwidth = 20; 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; opts.mobile_cols = opts.mobile_cols|| 1;
super(opts); super(opts);
this.set_style('display', 'grid'); 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('on_parent', this.set_column_width.bind(this));
this.bind('resize', this.set_column_width.bind(this)); this.bind('resize', this.set_column_width.bind(this));
if (this.cwidth){ if (this.cwidth){
bricks.app.bind('charsize', this.set_column_width.bind(this)); 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(){ set_column_width(){
var cw; var cw;
var cols; var cols;
var gap; 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 width = bricks.app.screenWidth();
var height = bricks.app.screenHeight(); var height = bricks.app.screenHeight();
if (bricks.is_mobile() && width < height){ 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.dom_element.style.gridTemplateColumns = "repeat(auto-fill, minmax(" + cw + "px, 1fr))";
this.set_style('gap', gap + 'px'); this.set_style('gap', gap + 'px');
// Fix existing children widths
this._fix_children();
} }
} }