vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（下）

系列文章

• vue3.0+ts+element-plus多页签应用模板：前言
• vue3.0+ts+element-plus多页签应用模板：项目搭建
• vue3.0+ts+element-plus多页签应用模板：vue-router与vuex
• vue3.0+ts+element-plus多页签应用模板：element-plus按需引入与动态换肤
• vue3.0+ts+element-plus多页签应用模板：如何优雅地使用Svg图标
• vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（上）
• vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（下）
• vue3.0+ts+element-plus多页签应用模板：多级路由缓存
• vue3.0+ts+element-plus多页签应用模板：头部工具栏（上）
• vue3.0+ts+element-plus多页签应用模板：头部工具栏（中）
• vue3.0+ts+element-plus多页签应用模板：头部工具栏（下）

一、实现剩余部分

在上一章节中，我们已经完成了MenuItem与ModuleMenu两部分的封装，接下来我们来将AsideBar和SystemLogo的部分完成。

1. SystemLogo

这个组件是侧边栏的头部内容，里面包括系统名和系统图标。同时，这个部分是需要自己去适配在展开和折叠两种状态所展示的内容的。具体思路就是：将图标和系统名两部分设置两个插槽，然后通过定义transition过渡动画，来实现两种状态之间丝滑的切换。下面给出主要代码，代码实现很简单，没啥需要说的：

SystemLogo.vue：

<template>
  <div class="asideBar-header">
    <transition name="aside-bar-logo-anim">
      <div v-show="collapse" class="asideBar-header__logo">
        <slot name="logo" />
      </div>
    </transition>
    <transition name="aside-bar-header-anim">
      <div v-show="!collapse" class="asideBar-header-container">
        <div class="asideBar-header__logo">
          <slot name="logo