一、實現效果

二、基本實現

1、菜單容器增加展開收縮方法

在菜單容器中開啟這個方法，值設置為一個變量

 :collapse='iscollapse'

2、定義菜單收縮與否的變量

在js中初始化是否收縮的變量，初始值為不收縮(也就是展開)

//左側菜單展開與收縮
const iscollapse = ref(true);//默認不收縮

?3、設置一個按鈕可管控是否收縮

在header中設置一個按鈕，給一個點擊事件，去控制是否收縮

<span @click="toggleSideBar">展開/收縮
</span>

?4、定義收縮展開方法

在js中寫入是否收縮的邏輯，如果點擊，就將是否收縮的變量值設置為相反(例如：現在是展開狀態，點擊一次就收縮，再點一次就展開)

//點擊按鈕實現收縮還是展開
const toggleSideBar = () => {iscollapse.value = !iscollapse.value;
}

5、需改左側菜單的動態寬度

在aside中，增加一個初始的css為sidebar,再增加一個根據變量設置的樣式is-short

如果iscollapse為true就執行is-short樣式，也就是在收縮的時候aside的樣式會有一個is-short

固定展開寬度為200px,?給一個寬度的過度效果為0.3秒，收縮的寬度設置為60px

6、修改視圖層存在的問題

這是沒修改視圖層之前的效果，發現折疊后，標題還沒有完全被隱藏

修改：給標題增加span標簽

三、完整代碼

src/layout/index.vue

<template><el-container class="layout-container-demo" style="height: 100vh"><el-aside :class="{ 'is-short': iscollapse }" class="sidebar"><el-scrollbar><!-- default-openeds:默認展開菜單 --><!-- default-active:默認選中菜單 --><!-- collapse:是否折疊菜單 --><el-menu :default-active="activeMenu" :router="true" :collapse='iscollapse'><!-- 遍歷一級菜單 --><template v-for="(item, index) in menu" :key="index"><!-- 如果一級菜單有子菜單，渲染 el-sub-menu --><el-sub-menu v-if="item.children && item.children.length > 0" :index="`${index + 1}`"><template #title><el-icon v-if="item.icon"><component :is="item.icon" /></el-icon><span>{{ item.name }}</span></template><!-- 遍歷二級菜單 --><el-menu-item v-for="(secondmenu, secondindex) in item.children" :key="secondindex":index="secondmenu.path"><span>{{ secondmenu.name }}</span></el-menu-item></el-sub-menu><!-- 如果一級菜單沒有子菜單，渲染 el-menu-item --><el-menu-item v-else :index="item.path"><el-icon v-if="item.icon"><component :is="item.icon" /></el-icon><span>{{ item.name }}</span></el-menu-item></template></el-menu></el-scrollbar></el-aside><el-container><el-header style="font-size: 12px"><span @click="toggleSideBar">展開/收縮</span><div class="toolbar"><el-dropdown><el-icon style="margin-right: 8px; margin-top: 1px"><setting /></el-icon><template #dropdown><el-dropdown-menu><el-dropdown-item>View</el-dropdown-item><el-dropdown-item>Add</el-dropdown-item><el-dropdown-item>Delete</el-dropdown-item></el-dropdown-menu></template></el-dropdown><span>Tom</span></div></el-header><!-- 右側內容 --><el-main><el-scrollbar><RouterView /></el-scrollbar></el-main><!-- 底部信息 --><el-footer class="flex flex-center"><span>@2025-2030 wen</span></el-footer></el-container></el-container>
</template><script setup>
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'//獲取當前頁面路徑
const route = useRoute();
const currentPath = route.path;
const activeMenu = ref(currentPath);//左側菜單展開與收縮
const iscollapse = ref(true);//默認不收縮
//點擊按鈕實現收縮還是展開
const toggleSideBar = () => {iscollapse.value = !iscollapse.value;
}
// 菜單
const menu = reactive([{name: 'Navigator One',icon: "message",path: '/about',},{name: 'Navigator Two',icon: "message",children: [{name: 'Option 1',path: '/home',},{name: 'Option 2',},{name: 'Option 3',},{name: 'Option 4',},]},
]);</script><style scoped>
.layout-container-demo .el-header {position: relative;background-color: var(--el-color-primary-light-7);color: var(--el-text-color-primary);
}.layout-container-demo .el-aside {color: var(--el-text-color-primary);background: var(--el-color-primary-light-8);
}.layout-container-demo .el-menu {border-right: none;
}.layout-container-demo .el-main {padding: 0;
}.layout-container-demo .toolbar {display: inline-flex;align-items: center;justify-content: center;height: 100%;right: 20px;
}/* 左側菜單寬度設置 */
.sidebar {width: 200px;transition: width .3s;
}.is-short {width: 60px;
}
</style>