Przeglądaj źródła

improve: 侧边栏展示优化

From-wh 2 lat temu
rodzic
commit
8236f7c53b

+ 13 - 14
template/admin/src/layout/component/aside.vue

@@ -28,20 +28,19 @@ export default {
   components: { Vertical, Logo },
   components: { Vertical, Logo },
   data() {
   data() {
     return {
     return {
-      menuList: [],
+      // menuList: [],
       clientWidth: '',
       clientWidth: '',
       catName: '',
       catName: '',
     };
     };
   },
   },
   computed: {
   computed: {
     // 设置左侧菜单的具体宽度
     // 设置左侧菜单的具体宽度
-    // menuList() {
-    //   this.$store.state.menus.childMenuList.length > 0
-    //     ? (this.$store.state.themeConfig.themeConfig.isCollapse = false)
-    //     : (this.$store.state.themeConfig.themeConfig.isCollapse = true);
-    //   console.log(this.$store.state.menus.childMenuList, 'this.$store.state.menus.childMenuList');
-    //   return this.$store.state.menus.childMenuList;
-    // },
+    menuList() {
+      this.$store.state.menus.childMenuList.length > 0
+        ? (this.$store.state.themeConfig.themeConfig.isCollapse = false)
+        : (this.$store.state.themeConfig.themeConfig.isCollapse = true);
+      return this.$store.state.menus.childMenuList;
+    },
     setCollapseWidth() {
     setCollapseWidth() {
       let { layout, isCollapse } = this.$store.state.themeConfig.themeConfig;
       let { layout, isCollapse } = this.$store.state.themeConfig.themeConfig;
       let asideBrColor = '';
       let asideBrColor = '';
@@ -76,12 +75,12 @@ export default {
   created() {
   created() {
     this.initMenuFixed(document.body.clientWidth);
     this.initMenuFixed(document.body.clientWidth);
     this.setFilterRoutes();
     this.setFilterRoutes();
-    this.bus.$on('setSendColumnsChildren', (res) => {
-      this.menuList = res || [];
-      this.menuList.length > 0
-        ? (this.$store.state.themeConfig.themeConfig.isCollapse = false)
-        : (this.$store.state.themeConfig.themeConfig.isCollapse = true);
-    });
+    // this.bus.$on('setSendColumnsChildren', (res) => {
+    //   this.menuList = res || [];
+    //   this.menuList.length > 0
+    //     ? (this.$store.state.themeConfig.themeConfig.isCollapse = false)
+    //     : (this.$store.state.themeConfig.themeConfig.isCollapse = true);
+    // });
     this.bus.$on('layoutMobileResize', (res) => {
     this.bus.$on('layoutMobileResize', (res) => {
       this.initMenuFixed(res.clientWidth);
       this.initMenuFixed(res.clientWidth);
     });
     });

+ 0 - 3
template/admin/src/layout/component/columnsAside.vue

@@ -70,8 +70,6 @@ export default {
       return this.$store.state.themeConfig.themeConfig.Layout;
       return this.$store.state.themeConfig.themeConfig.Layout;
     },
     },
     routesList() {
     routesList() {
-      console.log('大哥');
-
       this.$store.state.routesList.routesList;
       this.$store.state.routesList.routesList;
     },
     },
   },
   },
@@ -81,7 +79,6 @@ export default {
   },
   },
   mounted() {
   mounted() {
     this.bus.$on('routesListChange', () => {
     this.bus.$on('routesListChange', () => {
-      console.log('变了大哥');
       this.setFilterRoutes();
       this.setFilterRoutes();
     });
     });
     this.setFilterRoutes();
     this.setFilterRoutes();

+ 5 - 0
template/admin/src/layout/navMenu/vertical.vue

@@ -2,6 +2,7 @@
   <div>
   <div>
     <el-menu
     <el-menu
       router
       router
+      :class="setColumnsAsideStyle"
       background-color="transparent"
       background-color="transparent"
       :default-active="activePath || defaultActive"
       :default-active="activePath || defaultActive"
       :collapse="setIsCollapse"
       :collapse="setIsCollapse"
@@ -69,6 +70,10 @@ export default {
   },
   },
   computed: {
   computed: {
     ...mapState('menu', ['activePath']),
     ...mapState('menu', ['activePath']),
+    // 设置分栏高亮风格
+    setColumnsAsideStyle() {
+      return this.$store.state.themeConfig.themeConfig.columnsAsideStyle;
+    },
     // 获取布局配置信息
     // 获取布局配置信息
     getThemeConfig() {
     getThemeConfig() {
       return this.$store.state.themeConfig.themeConfig;
       return this.$store.state.themeConfig.themeConfig;