【报Bug】uni.setLeftWindowStyle在vue3不生效，在vue2是正常的

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

好的，我是DCloud的官方人员，收到你的Bug反馈。先对你的反馈内容做个评审。

1. 反馈内容完整度分析

整体来看，反馈的核心问题描述还算清晰，但有几处细节不够完善，会影响我们直接复现和定位：

• 代码示例存在明显错误
  你的示例代码中写了 const leftCollapse = ref{false};，正确的写法应该是 const leftCollapse = ref(false);。而且你在 checkMenuCollapse 方法里使用了 this.leftWidth，如果你的 Vue3 页面是组合式 API（<script setup>），this 是获取不到组件实例的，这会导致 API 没有被正确调用，进而看起来像是“不生效”。建议明确一下你用的是选项式 API 还是组合式 API。

• 缺少可独立运行的完整案例
  目前你只贴出了部分代码片段，没有给出完整的页面文件（例如 .vue 单文件组件的完整 <script>、<template>、<style> 结构），也没有说明 leftCollapse、checkMenuCollapse 是如何绑定到模板上的，我们无法直接复制到新项目里一键复现。

• 分类信息不够精确
  你提到了“PC开发环境操作系统”和“HBuilderX版本”，但没有在分类中明确选择运行平台。从描述看，你使用的是“运行到浏览器”，所以平台应该是 H5。uni.setLeftWindowStyle 这个 API 官方文档明确注明 仅 H5 平台支持（App、小程序等均不支持），如果你是在非 H5 环境下测试，自然不会有预期效果。

• 复现步骤可以再具体一些
  比如“在首页增加以上方法”，具体是哪个页面、文件中怎么引用的？最好能提供一个最小化可复现 Demo，直接说明代码放在哪个位置。

2. 问题是否成立分析

翻阅了知识库，uni.setLeftWindowStyle 的官方文档中明确写了平台差异：仅 H5 平台支持，且 --window-left 等 CSS 变量也是配合 leftWindow/rightWindow 宽屏适配使用的，这是 H5 特有的机制。你的预期“通过 setLeftWindowStyle 设置后，--window-left 变量应该变化”在逻辑上是合理的，Vue2 生效也证明 API 本身可以工作。

但是，目前的知识库（包括 ISSUE、问答社区、优先知识库等）没有任何一条记录说明 Vue3 下 uni.setLeftWindowStyle 存在已知 Bug。虽然有一个类似的旧 ISSUE 提到 --window-top 在 Vue3 开发模式下取值不正确并已修复，但和你反馈的问题并不直接相关。所以没有现成依据直接判定这是一个已确认的官方缺陷。

结合你代码里的写法问题，这个“不生效”现象很可能是 由 Vue3 中 this 上下文错误导致 API 未被调用 造成的。因此，你反馈的这个 Bug 目前尚不能完全成立，我们需要你先修正写法，同时提供一个纯净的、可复现的 Demo，我们再进一步排查。

3. 基础概念与写法检查

• 平台限制：uni.setLeftWindowStyle 和 leftWindow 配置都是 H5 专属，App、小程序端都不支持。你的开发目标一定是 H5 端，请确保一直运行在浏览器上测试。

• Vue3 写法差异：如果你用的是 <script setup>，this 不可用，需要直接使用 ref 创建的响应式变量，示例：

  <script setup>  
  import { ref } from 'vue'  
  const leftWidth = ref('240px')  
  const isCollapsed = ref(false)  
  
  const toggleMenu = () => {  
  isCollapsed.value = !isCollapsed.value  
  uni.setLeftWindowStyle({  
    width: isCollapsed.value ? '64px' : leftWidth.value  
  })  
  }  
  </script>  

  本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

  如果你用的是选项式 API（<script> + export default），那么 this 是可用的，此时请确保 data 里正确声明了变量。

• CSS 变量引用：你在 CSS 中使用 calc(var(--window-left))，这个变量是由 setLeftWindowStyle 设置宽度后自动更新的（H5 端）。如果 API 没成功调用，变量自然就不会变化。

4. 建议后续步骤

1. 请先修正代码中的语法错误（ref 调用和 this 用法），确保 API 被正确触发。
2. 提供一个完整的、可复现的页面文件（或最小项目），我们可以直接运行验证。
3. 确认仅在 H5 浏览器环境下测试。
4. 如果修正后 Vue3 下依然不生效，请将新的 Demo 重新提交，我们会进一步跟踪排查。

目前知识库中暂未收录该问题为已知 Bug，待你补充可复现 Demo 后，我们可以正式收录并处理。感谢你的反馈。

发个可复现demo

可复现demo，可以在manifest.json中切换vue2或vue3，运行看一下效果，切换vue2是没有问题的，切换vue3就不行