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

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

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

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

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

    然后将这个组件放在里面,再计算宽度。
    iPhone12
        6
    iPhone12  
       2022-01-18 13:05:05 +08:00
    #5 还有一种最简单的方案就是 window.getComputedStyle(element).getPropertyValue('width')
    iNaru
        7
    iNaru  
       2022-01-18 13:08:07 +08:00
    给这个组件节点加个 1ms 的 css 动画,然后侦听该节点的 animationend 事件,在事件回调中计算样式就行。
    yaphets666
        8
    yaphets666  
       2022-01-18 13:39:45 +08:00
    他的 parent element 隐藏了,父元素隐藏了,子元素不隐藏?
    sweetcola
        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 ,但缺点也很明显,要遍历整个树和重渲染造成额外的计算量。
    coolair
        10
    coolair  
    OP
       2022-01-18 14:44:26 +08:00
    @br_wang
    已使用 ResizeObserver 解决,感谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3976 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:12 · PVG 12:12 · LAX 20:12 · JFK 23:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.