侧边栏添加logo

image.png
也可以控制显示和隐藏
image.png

image.png

3-1 修改Settings

添加logo切换按钮

image.png
src/layout/components/Settings/index.vue

  1. <template>
  2.   <div class="drawer-container">
  3.     <div class="drawer-item">
  4.       <span>主题色</span>
  5.       <theme-picker />
  6.     </div>
  8.     <div class="drawer-item">
  9.       <span>Open Tags-View</span>
  10.       <el-switch v-model="tagsView" class="drawer-switch" />
  11.     </div>
  13.     <!-- 侧边栏logo  -->
  14.     <div class="drawer-item">
  15.       <span>Sidebar Logo</span>
  16.       <el-switch v-model="showSidebarLogo" class="drawer-switch" />
  17.     </div>
  18.   </div>
  19. </template>
  21. <script lang="ts">
  22. import { defineComponent, computed } from 'vue'
  23. import ThemePicker from '@/components/ThemePicker/index.vue'
  24. import { useStore } from '@/store'
  26. export default defineComponent({
  27.   name: 'Settings',
  28.   components: {
  29.     ThemePicker
  30.   },
  31.   setup() {
  32.     const store = useStore()
  33.     const tagsView = computed({
  34.       get() {
  35.         return store.state.settings.tagsView
  36.       },
  37.       set(val) {
  38.         store.dispatch('settings/changeSetting', {
  39.           key: 'tagsView',
  40.           value: val
  41.         })
  42.       }
  43.     })
  45.     const showSidebarLogo = computed({
  46.       get() {
  47.         return store.state.settings.sidebarLogo
  48.       },
  49.       set(val) {
  50.         store.dispatch('settings/changeSetting', {
  51.           key: 'sidebarLogo',
  52.           value: val
  53.         })
  54.       }
  55.     })
  57.     return {
  58.       tagsView,
  59.       showSidebarLogo
  60.     }
  61.   }
  62. })
  63. </script>
  65. <style lang="scss" scoped>
  66.   .drawer-container {
  67.     padding: 24px;
  68.     font-size: 14px;
  69.     line-height: 1.5;
  70.     word-wrap: break-word;
  72.     .drawer-item {
  73.       display: flex;
  74.       justify-content: space-between;
  75.       padding: 12px 0;
  76.       font-size: 16px;
  77.       color: rgba(0, 0, 0, .65);
  78.     }
  79.   }
  80. </style>

3-2 store中添加状态

image.png
src/store/modules/settings.ts

  1. import { MutationTree, ActionTree } from 'vuex'
  2. import variables from '@/styles/variables.scss'
  3. import { IRootState } from '@/store'
  5. export interface ISettingsState {
  6.   theme: string;
  7.   tagsView: boolean;
  8.   originalStyle: string;
  9.   sidebarLogo: boolean;
  10. }
  12. // 定义state
  13. const state: ISettingsState = {
  14.   theme: variables.theme,
  15.   tagsView: true,
  16.   originalStyle: '',
  17.   sidebarLogo: true
  18. }
  20. // 动态key的情况下 根据不同的key 约束对应value
  21. // http://www.voidcn.com/article/p-wtmkdcie-byz.html
  22. type ValueOf<T> = T[keyof T];
  23. interface ISettings { // 约束payload类型
  24.   key: keyof ISettingsState; // 约束为ISettingsState中key
  25.   value: ValueOf<ISettingsState>; // 约束为ISettingsState中value的类型
  26. }
  27. // 定义mutations
  28. const mutations: MutationTree<ISettingsState> = {
  29.   CHANGE_SETTING(state, { key, value }: ISettings) {
  30.     if (key in state) {
  31.       (state[key] as ValueOf<ISettingsState>) = value
  32.     }
  33.   }
  34. }
  36. const actions: ActionTree<ISettingsState, IRootState> = {
  37.   changeSetting({ commit }, data) {
  38.     commit('CHANGE_SETTING', data)
  39.   }
  40. }
  42. export default {
  43.   namespaced: true,
  44.   state,
  45.   mutations,
  46.   actions
  47. }

3-3 创建logo组件

src/layout/components/Sidebar/Logo.vue

  1. <template>
  2.   <div class="sidebar-logo-container" :class="{collapse: collapse}">
  3.     <transition name="sidebarLogoFade">
  4.       <!-- sidebar收起状态下 -->
  5.       <router-link
  6.         v-if="collapse"
  7.         key="collapse"
  8.         to="/"
  9.         class="sidebar-logo-link"
  10.       >
  11.         <img
  12.           v-if="logo"
  13.           :src="logo"
  14.           class="sidebar-logo"
  15.           alt="VueElementAdmin"
  16.         >
  17.         <h1
  18.           v-else
  19.           class="sidebar-title"
  20.         >{{ title }}</h1>
  21.       </router-link>
  22.       <router-link
  23.         v-else
  24.         key="expand"
  25.         to="/"
  26.         class="sidebar-logo-link"
  27.       >
  28.         <img
  29.           v-if="logo"
  30.           :src="logo"
  31.           class="sidebar-logo"
  32.           alt="VueElementAdmin"
  33.         >
  34.         <h1 class="sidebar-title">{{ title }}</h1>
  35.       </router-link>
  36.     </transition>
  37.   </div>
  38. </template>
  40. <script lang="ts">
  41. import { defineComponent } from 'vue'
  43. export default defineComponent({
  44.   name: 'Logo',
  45.   props: {
  46.     collapse: {
  47.       type: Boolean,
  48.       required: true
  49.     }
  50.   },
  51.   setup() {
  52.     return {
  53.       title: 'Vue Element Admin',
  54.       logo: require('@/assets/logo.png')
  55.       // logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
  56.     }
  57.   }
  58. })
  59. </script>
  61. <style lang="scss" scoped>
  62. .sidebar-logo-container {
  63.   width: 100%;
  64.   height: 50px;
  65.   line-height: 50px;
  66.   text-align: center;
  67.   background: #2b2f3a;
  68.   overflow: hidden;
  69.   .sidebar-logo-link {
  70.     display: block;
  71.     width: 100%;
  72.     height: 100%;
  73.     .sidebar-logo {
  74.       width: 32px;
  75.       height: 32px;
  76.       vertical-align: middle;
  77.       margin-right: 12px;
  78.     }
  80.     .sidebar-title {
  81.       display: inline-block;
  82.       color: #fff;
  83.       margin: 0;
  84.       font-weight: 600;
  85.       line-height: 50px;
  86.       font-size: 14px;
  87.       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  88.       vertical-align: middle;
  89.     }
  90.   }
  91.   &.collapse {
  92.     .sidebar-logo {
  93.       margin-right: 0;
  94.     }
  95.   }
  96. }
  98. .sidebarLogoFade-enter-active {
  99.   transition: opacity 1.5s;
  100. }
  102. .sidebarLogoFade-enter-from,
  103. .sidebarLogoFade-leave-to {
  104.   opacity: 0;
  105. }
  106. </style>

3-4 sidebar里添加logo

image.png

  1. <template>
  2.   <div>
  3.     <logo v-if="showLogo" :collapse="isCollapse" />
  4.     <el-menu
  5.       class="sidebar-container-menu"
  6.       mode="vertical"
  7.       :default-active="activeMenu"
  8.       :background-color="scssVariables.menuBg"
  9.       :text-color="scssVariables.menuText"
  10.       :active-text-color="themeColor"
  11.       :collapse="isCollapse"
  12.       :collapse-transition="true"
  13.     >
  14.       <sidebar-item
  15.         v-for="route in menuRoutes"
  16.         :key="route.path"
  17.         :item="route"
  18.         :base-path="route.path"
  19.       />
  20.     </el-menu>
  21.   </div>
  22. </template>
  24. <script lang="ts">
  25. import { defineComponent, computed } from 'vue'
  26. import { useRoute } from 'vue-router'
  27. import variables from '@/styles/variables.scss'
  28. import { routes } from '@/router'
  29. import SidebarItem from './SidebarItem.vue'
  30. import { useStore } from '@/store'
  31. import Logo from './Logo.vue'
  33. export default defineComponent({
  34.   name: 'Sidebar',
  35.   components: {
  36.     Logo,
  37.     SidebarItem
  38.   },
  39.   setup() {
  40.     const route = useRoute()
  41.     const store = useStore()
  42.     // 根据路由路径 对应 当前激活的菜单
  43.     const activeMenu = computed(() => {
  44.       const { path, meta } = route
  45.       // 可根据meta.activeMenu指定 当前路由激活时 让哪个菜单高亮选中
  46.       if (meta.activeMenu) {
  47.         return meta.activeMenu
  48.       }
  49.       return path
  50.     })
  51.     // scss变量
  52.     const scssVariables = computed(() => variables)
  53.     // 展开收起状态 稍后放store 当前是展开就让它收起
  54.     const isCollapse = computed(() => !store.getters.sidebar.opened)
  56.     // 渲染路由
  57.     const menuRoutes = computed(() => routes)
  59.     // 获取主题色
  60.     const themeColor = computed(() => store.getters.themeColor)
  62.     // 是否显示logo
  63.     const showLogo = computed(() => store.state.settings.sidebarLogo)
  65.     return {
  66.       // ...toRefs(variables), // 不有toRefs原因 缺点variables里面变量属性来源不明确
  67.       scssVariables,
  68.       isCollapse,
  69.       activeMenu,
  70.       menuRoutes,
  71.       themeColor,
  72.       showLogo
  73.     }
  74.   }
  75. })
  76. </script>

本节参考源码

https://gitee.com/brolly/vue3-element-admin/commit/3d782444f64ffcaa061f832771d4dcf7700eeb4d