用 ref 管理侧边栏折叠状态最轻量，核心是定义 ref 布尔值 isCollapse 并绑定到 el-menu 的 collapse 属性，配合 toggleCollapse 方法切换、动态宽度控制及 CSS 类联动实现完整收展效果。
用 ref 管理侧边栏折叠状态是最轻量、最直接的方式，适合中小型项目或局部控制场景。核心是定义一个响应式布尔值，再将其绑定到菜单的 collapse 属性上，并通过点击事件切换它。
定义折叠状态 ref 变量
在组件的 setup 中，使用 ref 创建初始状态（通常默认展开）：
-
const isCollapse = ref(false)：表示菜单默认不折叠（false= 展开） - 若需默认收起，设为
ref(true) - 该变量后续会直接传给
<el-menu>的:collapse属性
绑定 collapse 属性并关闭动画
el-menu 的 collapse 是布尔属性，值为 true 时菜单收缩为图标模式：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 写法：
<el-menu :collapse="isCollapse"> - 建议加
:collapse-transition="false"关闭默认动画，避免文字闪烁或错位 - 若需自定义过渡效果，可配合 CSS 宽度变化 +
transition实现，更可控
添加折叠/展开触发按钮
在侧边栏顶部或 header 区域放一个可点击区域（如带 ||| 图标的 div）：
立即学习“前端免费学习笔记（深入）”；
- HTML 示例：
<div class="toggle-button" @click="toggleCollapse">|||</div> - JS 逻辑：
const toggleCollapse = () => { isCollapse.value = !isCollapse.value } - 注意：必须用
.value赋值，因为ref是一个包装对象
同步调整 aside 宽度与内容显示
仅改 collapse 不足以让视觉完全匹配，还需联动样式：
- 给
<el-aside>绑定动态宽度：:width="isCollapse.value ? '64px' : '200px'" - 用
:class="{ 'is-collapsed': isCollapse }"控制子元素显隐（如菜单文字、logo 文本） - 图标类建议按状态切换，例如：
:class="isCollapse.value ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
