wdssmq
V2EX  ›  问与答

「vue3」useCssVar 无法初始化值

  •  
  •   wdssmq · Jul 4, 2023 · 1083 views
    This topic created in 1050 days ago, the information mentioned may be changed or developed.

    我发完贴回去刷新了一下就发现 initialValue 生效了。。Why ???????

    所以下一个问题是,手机松开滑动时才会响应 resize 事件,,有什么方案优化么?


    手机端的 100vh 和实际并不一致,会被浏览器自身的底部工具条遮挡,所以用了 window.innerHeight * 0.01 自动计算,然而加载完成后并不能成功初始化;

    // const vhSize = useCssVar('--vhSize', appLeft, { initialValue: GetVh() })
    const vhSize = useCssVar('--vhSize', appLeft, { initialValue: '7.56px' })
    // 上边 initialValue 指定不生效
    
    const setVhSize = () => {
      vhSize.value = GetVh()
    }
    // setVhSize()
    // 无论是这样直接调用还是写在 onMounted() 里都不管用
    
    // 这里响应窗口变化到是正常
    useEventListener(window, 'resize', (event) => {
      setVhSize()
    })
    

    useCssVar | VueUse 中文文档:

    http://www.vueusejs.com/core/useCssVar/

    Supplement 1  ·  Jul 4, 2023
    就超级无语,生效是因为我在 css 里指定了一个值。。然而这个值只适用于我物手机屏幕 - -

    `{ initialValue: GetVh() } `内返回值是 7.56 ,是符合预期的,然而没能给到元素的 style ;

    ```js
    onMounted(() => {
    setVhSize() // 8.54
    setTimeout(() => {
    setVhSize() // 7.56
    }, 3000);
    })
    ```

    无论值对不对,都不能直接通过 vhSize.value 初始化给 CSS 变量,除非延迟执行 + 手动 setProperty 。。就很蛋疼
    1 replies    2023-07-04 12:32:36 +08:00
    wdssmq
        1
    wdssmq  
    OP
       Jul 4, 2023
    up. 手机端侧栏高度设置 · wdssmq/Just-Imgs@17d7c37
    https://github.com/wdssmq/Just-Imgs/commit/17d7c37dae6294269a18c77667eb2ce9b91fe4a6

    姑且用 nextTick() 搞定了。。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5248 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 07:41 · PVG 15:41 · LAX 00:41 · JFK 03:41
    ♥ Do have faith in what you're doing.