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 ,但缺点也很明显,要遍历整个树和重渲染造成额外的计算量。 |