V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
coolair
V2EX  ›  Vue.js

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

  •  
  •   coolair · 124 天前 · 1424 次点击
    这是一个创建于 124 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我有一个组件,默认在 mounted 的时候会在填完数据后计算一下样式,然后做相应的调整。

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

    有没有办法在自己这个组件内解决这个问题?
    10 条回复    2022-01-18 14:44:26 +08:00
    ccyu220
        1
    ccyu220  
       124 天前
    不只要 mounted 之后计算,还要 watch 随时调整。
    coolair
        2
    coolair  
    OP
       124 天前
    @ccyu220 watch 不了啊,他自己状态没变,parent element 隐藏了。
    ruizer
        3
    ruizer  
       124 天前 via Android
    直接 observe 当前元素尺寸
    br_wang
        4
    br_wang  
       124 天前
    如果父元素隐藏了,子元素都不渲染,计算宽度确实没什么意义。
    比较粗暴的方式是增加个 prop 来通知显隐,通过 watch 来实现自动计算。
    如果使用场景对兼容性没那么多要求,试试 ResizeObserver API https://caniuse.com/resizeobserver
    iPhone12
        5
    iPhone12  
       124 天前
    在 body 里面创建一个绝对定位元素(防导致其它元素布局变化),高度宽度为 0 。

    然后将这个组件放在里面,再计算宽度。
    iPhone12
        6
    iPhone12  
       124 天前
    #5 还有一种最简单的方案就是 window.getComputedStyle(element).getPropertyValue('width')
    iNaru
        7
    iNaru  
       124 天前
    给这个组件节点加个 1ms 的 css 动画,然后侦听该节点的 animationend 事件,在事件回调中计算样式就行。
    yaphets666
        8
    yaphets666  
       124 天前
    他的 parent element 隐藏了,父元素隐藏了,子元素不隐藏?
    sweetcola
        9
    sweetcola  
       124 天前
    已经隐藏了再怎么测量都只会是 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
        10
    coolair  
    OP
       124 天前
    @br_wang
    已使用 ResizeObserver 解决,感谢。
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2317 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:05 · PVG 00:05 · LAX 09:05 · JFK 12:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.