网页微博注销_国家企业信息公示系统(全国)官网_友情链接平台_竞价推广外包托管

一、实现效果

1. 侧边栏可平滑折叠/展开，带有过渡动画

2. 折叠时隐藏Logo文字，只显示图标

3. 优化滚动区域，避免标题栏随菜单滚动

4. 解决折叠/展开时出现的滚动条闪烁问题

二、 实现

1、可以使用 SCSS（Sass 的一种语法）

首先安装scss

npm install sass sass-loader --save-dev

使用scss

在style是时候加入scss

 2、增加logo图标加文字

左侧菜单栏aside顶部加入logo信息

建立div，加入img图标和span写入标题名称

<div class="logo flex flex-center"><img src="@/assets/logo.png" alt="" /><span class="logo_title">SMS学习系统</span>
</div>

图标路径

3、折叠后隐藏logo的span标题

对标题名称加入判断，如果iscollapse为false就隐藏，为true就展示标题

v-if="!iscollapse"

4、顶部标题栏样式 

未调整样式前，图标很大，文字被遮挡，并且直观效果很差

调整后-将图标宽高进行调整，加标题文字，居中显示，文字颜色显示为主题色

需要调整图标的大小，以及文字颜色加粗等效果

这里的 white-space: nowrap：不允许文字换行。加入的目的是为了在菜单折叠的时候，文字不会被堆积在一起。

 

5、调整折叠收缩的过渡效果

由于没有调整过度效果，整体点击按钮的实现效果都会很生硬

增加logo标题的过渡效果

给logo标题的span加入transition过渡标签，标签有自带的过渡效果。

<Transition name="tsn"><span class="logo_title" v-if="!iscollapse">SMS学习系统</span>
</Transition>

增加css效果 

给折叠后，展示的span一个隐藏效果，由于logo的文字有个margin-left,所以需要设置为0，进行隐藏opcity:0;给全部一个0.5s的过渡

这里使用了嵌套的css方法，就是使用的scss的方法

/* 不折叠菜单宽度 */
.sidebar {width: 200px;transition: width 0.5s;
}/* 折叠菜单宽度 */
.is-short {width: 60px;span {margin-left: 0px;opacity: 0;transition: all 0.5s;}
}

 

这里补充一点：

这里使用的是标签transition的效果，加入了进入和退出的过渡效果，可以更平滑过渡

 6、logo滚动优化

优化前-滚动条高度为100vh，会携带标题一同滚动，标题会被页面遮挡，影响美观

优化后-解决带标题一同滚动的问题，只允许菜单滚动，标题不会随之滚动

增加一部分菜单看效果，会明显看出滚动条高度为除去标题部分的高度

设置菜单滚动组件的样式

<el-scrollbar class="scrollbar-height">

这里为总高度100vh-标题标题高度60vh ,使用计算属性calc

// 左侧菜单滚动条的高度设置
.scrollbar-height {height: calc(100vh - 60px);
}

7、解决收缩展开过程中，由于宽撑开->高撑开导致滚动条的出现

对左侧部分增加超出隐藏的样式

overflow: hidden;

三、完整代码

src/layout/index.vue

<template><el-container class="layout-container-demo" style="height: 100vh"><el-aside :class="{ 'is-short': iscollapse }" class="sidebar"><div class="logo flex flex-center"><img src="@/assets/logo.png" alt="" /><Transition name="tsn"><span class="logo_title" v-if="!iscollapse">SMS学习系统</span></Transition></div><el-scrollbar class="scrollbar-height"><!-- 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="text-align: right; 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 { reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
//获取路由信息
const route = useRoute();
const activeMenu = ref(route.path);
// 折叠菜单
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',},]}, {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',},]}, {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 lang="scss">
/* logo */
.logo {height: 60px;font-weight: bold;color: var(--el-color-primary);white-space: nowrap;img {width: 30px;height: 30px;}.logo_title {margin-left: 5px;}
}//logo文字进入退出过渡动画 */
// .tsn-enter-active, .tsn-leave-active {
//   transition: all .5s;
// }// 左侧菜单滚动条的高度设置
.scrollbar-height {height: calc(100vh - 60px);
}/* 不折叠菜单宽度 */
.sidebar {width: 200px;transition: width 0.5s;overflow: hidden;
}/* 折叠菜单宽度 */
.is-short {width: 60px;span {margin-left: 0px;opacity: 0;transition: all 0.5s;}
}.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;
}
</style>