关于 VUE 组件自动调整样式问题

[coolair]

我有一个组件，默认在 mounted 的时候会在填完数据后计算一下样式，然后做相应的调整。

但是，别人在用的时候，发现，如果他的 parent element 隐藏了，计算的时候获取的 element 的长宽就是 0 ，也就没用了。

有没有办法在自己这个组件内解决这个问题？

[ccyu220]

不只要 mounted 之后计算，还要 watch 随时调整。

[coolair]

@ccyu220 watch 不了啊，他自己状态没变，parent element 隐藏了。

[ruizer]

直接 observe 当前元素尺寸

[br_wang]

如果父元素隐藏了，子元素都不渲染，计算宽度确实没什么意义。
比较粗暴的方式是增加个 prop 来通知显隐，通过 watch 来实现自动计算。
如果使用场景对兼容性没那么多要求，试试 ResizeObserver API https://caniuse.com/resizeobserver ？

[iPhone12]

在 body 里面创建一个绝对定位元素（防导致其它元素布局变化），高度宽度为 0 。

然后将这个组件放在里面，再计算宽度。

[iPhone12]

#5 还有一种最简单的方案就是 window.getComputedStyle(element).getPropertyValue('width')

[iNaru]

给这个组件节点加个 1ms 的 css 动画，然后侦听该节点的 animationend 事件，在事件回调中计算样式就行。

[yaphets666]

他的 parent element 隐藏了,父元素隐藏了,子元素不隐藏?

[sweetcola]

已经隐藏了再怎么测量都只会是 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 ，但缺点也很明显，要遍历整个树和重渲染造成额外的计算量。

[coolair]

@br_wang
已使用 ResizeObserver 解决，感谢。