blog
blog copied to clipboard
p-dropdown 组件 options 动态生成会导致向上弹出选择框时 top 计算错误
当有很多 options 类似的 dropdown 时,会这样写:
<p-dropdown [options]="genArrayOptions([19, 20, 21, 22, 23], '点')"
[autoWidth]="false"
formControlName="sleepStartTime"></p-dropdown>
这个 genArrayOptions
方法生成对应的 options 数组,这样当类似的下拉框很多时,可以复用。但当向上弹出下拉框时,发现了这个问题:
这是什么情况,离了好远。。。
去翻了下 PrimeNG 对 dropdown 弹出框处理的代码,计算弹出框位置的相关代码在 dom/domhandler.ts 类,里面定义了 relativePosition
和 absolutePosition
两个方法用于计算弹出框的 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>
果然,没有问题了。。。