blog icon indicating copy to clipboard operation
blog copied to clipboard

p-dropdown 组件 options 动态生成会导致向上弹出选择框时 top 计算错误

Open ryancui92 opened this issue 7 years ago • 0 comments

当有很多 options 类似的 dropdown 时,会这样写:

<p-dropdown [options]="genArrayOptions([19, 20, 21, 22, 23], '点')"
                        [autoWidth]="false"
                        formControlName="sleepStartTime"></p-dropdown>

这个 genArrayOptions 方法生成对应的 options 数组,这样当类似的下拉框很多时,可以复用。但当向上弹出下拉框时,发现了这个问题:

image

这是什么情况,离了好远。。。

去翻了下 PrimeNG 对 dropdown 弹出框处理的代码,计算弹出框位置的相关代码在 dom/domhandler.ts 类,里面定义了 relativePositionabsolutePosition 两个方法用于计算弹出框的 top 跟 left.

逻辑都没太大问题,超出 viewport 就往上弹出,计算公式也对,那只能是原始变量出问题了。思前想后看到了这个:

element.style.visibility = 'hidden';
element.style.display = 'block';
dimensions.width = element.offsetWidth;
dimensions.height = element.offsetHeight;
element.style.display = 'none';
element.style.visibility = 'visible';

这个弹出框 panel 的高度实际上是通过 block 显示的时候获取的,辣么如果这时候渲染的 panel height 拿错了不就 gg 了么,再对比其他不是动态生成选项的 dropdown,果断换成在 ngOnInit 中初始化的 options 试一试:

<p-dropdown [options]="someOptions"
                        [autoWidth]="false"
                        formControlName="sleepStartTime"></p-dropdown>

果然,没有问题了。。。

image

ryancui92 avatar Jul 17 '17 03:07 ryancui92