用 ref 管理侧边栏折叠状态最轻量，核心是定义 ref 布尔值 iscollapse 并绑定到 el-menu 的 collapse 属性，配合 togglecollapse 方法切换、动态宽度控制及 css 类联动实现完整收展效果。
用 ref 管理侧边栏折叠状态是最轻量、最直接的方式，适合中小型项目或局部控制场景。核心是定义一个响应式布尔值，再将其绑定到菜单的 collapse 属性上，并通过点击事件切换它。
定义折叠状态 ref 变量
在组件的 setup 中，使用 ref 创建初始状态（通常默认展开）：
-
const isCollapse = ref(false)：表示菜单默认不折叠（false= 展开） - 若需默认收起，设为
ref(true) - 该变量后续会直接传给
<el-menu></el-menu>的:collapse属性
绑定 collapse 属性并关闭动画
el-menu 的 collapse 是布尔属性，值为 true 时菜单收缩为图标模式：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章