这是一个创建于 1033 天前的主题，其中的信息可能已经有所发展或是发生改变。
我有一个组件，默认在 mounted 的时候会在填完数据后计算一下样式，然后做相应的调整。
但是，别人在用的时候，发现，如果他的 parent element 隐藏了，计算的时候获取的 element 的长宽就是 0 ，也就没用了。
有没有办法在自己这个组件内解决这个问题？
但是，别人在用的时候，发现，如果他的 parent element 隐藏了，计算的时候获取的 element 的长宽就是 0 ，也就没用了。
有没有办法在自己这个组件内解决这个问题？
 |
1
ccyu220 2022-01-18 10:48:25 +08:00
不只要 mounted 之后计算，还要 watch 随时调整。
|
 |
3
ruizer 2022-01-18 11:25:24 +08:00 via Android
直接 observe 当前元素尺寸
|
 |
4
br_wang 2022-01-18 11:26:09 +08:00
如果父元素隐藏了，子元素都不渲染，计算宽度确实没什么意义。
比较粗暴的方式是增加个 prop 来通知显隐，通过 watch 来实现自动计算。 如果使用场景对兼容性没那么多要求，试试 ResizeObserver API https://caniuse.com/resizeobserver ？ |
 |
5
iPhone12 2022-01-18 12:50:50 +08:00
在 body 里面创建一个绝对定位元素（防导致其它元素布局变化），高度宽度为 0 。
然后将这个组件放在里面，再计算宽度。 |
|
6
iPhone12 2022-01-18 13:05:05 +08:00
#5 还有一种最简单的方案就是 window.getComputedStyle(element).getPropertyValue('width')
|
 |
7
iNaru 2022-01-18 13:08:07 +08:00
给这个组件节点加个 1ms 的 css 动画，然后侦听该节点的 animationend 事件，在事件回调中计算样式就行。
|
 |
8
yaphets666 2022-01-18 13:39:45 +08:00
他的 parent element 隐藏了,父元素隐藏了,子元素不隐藏?
|
 |
9
sweetcola 2022-01-18 14:09:09 +08:00
已经隐藏了再怎么测量都只会是 0 。不能检测并且没缓存和没预设值的情况下，在自己的组件里解决的话只有一种方法，把 parentElement 的 display 改成 block 。
``` const parentElementDisplay = $0.parentElement.style.display; $0.parentElement.style.display = 'block'; const { width, height } = $0.getBoundingClientRect(); $0.parentElement.style.display = parentElementDisplay; ``` 这是单一父元素被隐藏的情况，如果被隐藏的节点很深的话就对整个树都做这种操作。这种操作可以避免检测到 0 ，但缺点也很明显，要遍历整个树和重渲染造成额外的计算量。 |
Select Language