vue3 宽屏适配时 resize事件没有更新--window-right，导致tabbar宽度异常, vue2无问题
EntropyM
- 发布：2025-08-25 14:24
- 更新：2025-08-26 10:24
- 阅读：42
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 10
HBuilderX类型： 正式
HBuilderX版本号： 4.64
浏览器平台： Edge
浏览器版本： 139
项目创建方式： HBuilderX
操作步骤：
预期结果：
vue3 宽屏适配时tabbar宽度正常
vue3 宽屏适配时tabbar宽度正常
实际结果：
vue3 宽屏适配时 resize事件没有更新--window-right，导致tabbar宽度异常
vue3 宽屏适配时 resize事件没有更新--window-right，导致tabbar宽度异常
bug描述：
vue3 宽屏适配时 resize事件没有更新--window-right，导致tabbar宽度异常, vue2无问题
EntropyM (作者)
好的，我建一个
2025-08-25 14:58
EntropyM (作者)
https://gitcode.com/EntropyM/starter
配置如下，是不支持calc 么，vue2时是正常的
"rightWindow": {
"path": "windows/right-window.vue",
"style": {
"width": "calc(100vw - 375px)"
},
"matchMedia": {
"minWidth": 768
}
},
2025-08-25 15:54
DCloud_UNI_yuhe
回复 EntropyM: 在哪里用到的，该从哪里看你的示例?
2025-08-25 16:45
EntropyM (作者)
回复 DCloud_UNI_yuhe: https://gitcode.com/EntropyM/starter 宽屏时>768显示right-window，此时调整浏览器宽度，右侧宽度并没有变化
2025-08-25 17:30
DCloud_UNI_yuhe
回复 EntropyM: 你提供的代码包含了非常多与问题无关的内容，是否可以提供一下更近简单的版本？只包含有问题相关的内容
2025-08-25 17:32
EntropyM (作者)
回复 DCloud_UNI_yuhe: 这个就是你们的starter代码，只需关注tabbar的css，使用了right: var(--window-right), 但是window-right 被写死了，并不是配置里的"width": "calc(100vw - 375px)"
2025-08-25 17:46
DCloud_UNI_yuhe
回复 EntropyM: 不清楚你什么意思，还请你详细说一下，这个 rightWindow 的 width 不是 tabbar 的 right
2025-08-25 19:03
EntropyM (作者)
回复 DCloud_UNI_yuhe: 不好意思，没表达清楚，.uni-tabbar {
position: fixed;
left: var(--window-left);
right: var(--window-right);
} 这个window-right 是个固定值，这样在拖动窗口时tabbar的宽度就会被缩放，而不是固定的剩余空间375px，可以看下图
2025-08-26 10:20
DCloud_UNI_yuhe
回复 EntropyM: 您最好就是新建一个项目，只保留问题部分代码，这样比较容易复现和确认问题
2025-08-26 11:11