From 1595cb282aab5399862fac6406b5de550863e3b6 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 03 四月 2023 00:05:09 +0800 Subject: [PATCH] update 调整代码格式 --- src/layout/components/Sidebar/index.vue | 57 +++++++++++++++++++++++++++++---------------------------- 1 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index 9b14dfc..a568c71 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -1,35 +1,12 @@ -<template> - <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> - <logo v-if="showLogo" :collapse="isCollapse" /> - <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper"> - <el-menu - :default-active="activeMenu" - :collapse="isCollapse" - :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground" - :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" - :unique-opened="true" - :active-text-color="theme" - :collapse-transition="false" - mode="vertical" - > - <sidebar-item - v-for="(route, index) in sidebarRouters" - :key="route.path + index" - :item="route" - :base-path="route.path" - /> - </el-menu> - </el-scrollbar> - </div> -</template> - -<script setup> -import Logo from './Logo' -import SidebarItem from './SidebarItem' +<script setup lang="ts"> +import Logo from './Logo.vue' +import SidebarItem from './SidebarItem.vue' import variables from '@/assets/styles/variables.module.scss' import useAppStore from '@/store/modules/app' import useSettingsStore from '@/store/modules/settings' import usePermissionStore from '@/store/modules/permission' +import { ComponentInternalInstance } from "vue"; +const { proxy } = getCurrentInstance() as ComponentInternalInstance; const route = useRoute(); const appStore = useAppStore() @@ -51,4 +28,28 @@ return path; }) +const bgColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground); +const textColor = computed(() => sideTheme.value === 'theme-dark' ? variables.menuColor : variables.menuLightColor); </script> + +<template> + <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }"> + <logo v-if="showLogo" :collapse="isCollapse" /> + <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper"> + <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in"> + <el-menu + :default-active="activeMenu as string" + :collapse="isCollapse" + :background-color="bgColor" + :text-color="textColor" + :unique-opened="true" + :active-text-color="theme" + :collapse-transition="false" + mode="vertical" + > + <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" /> + </el-menu> + </transition> + </el-scrollbar> + </div> +</template> -- Gitblit v1.9.3