Quellcode durchsuchen

fix sidebar collapse

Michael Wang vor 6 Jahren
Ursprung
Commit
303090a072
3 geänderte Dateien mit 27 neuen und 3 gelöschten Zeilen
  1. 25 3
      src/modules/portal/views/home/HomeSide.vue
  2. 1 0
      src/plugins/vueAwesome.js
  3. 1 0
      src/styles/global.css

+ 25 - 3
src/modules/portal/views/home/HomeSide.vue

@@ -1,9 +1,19 @@
 <template>
-  <el-aside width="200px" v-if="menuList.length > 0">
+  <el-aside width="" v-if="menuList.length > 0">
     <div
       style="height: 50px; margin-top: 20px; margin-left: 20px; font-size: 20px"
     >
-      <i class="el-icon-location"></i> <span>{{ group.name }}</span>
+      <span v-if="!isCollapse">{{ group.name }}</span>
+
+      <el-button
+        type="text"
+        class="float-right"
+        size="mini"
+        style="padding: 0; padding-right: 12px;"
+        @click="toggoleSidebar"
+      >
+        <v-icon name="bars" scale="2" />
+      </el-button>
     </div>
     <el-menu
       class="el-menu-vertical-demo"
@@ -12,6 +22,7 @@
       active-text-color="#409eff"
       router
       :default-active="$route.path"
+      :collapse="isCollapse"
     >
       <el-submenu
         v-for="menu1 in menuList1"
@@ -19,6 +30,7 @@
         :index="menu1.nodeCode"
       >
         <template slot="title">
+          <i class="el-icon-menu"></i>
           <router-link
             v-if="menu1.ext5"
             :to="{ path: menu1.ext5 }"
@@ -98,7 +110,8 @@ export default {
   data() {
     return {
       group: null,
-      menuList: []
+      menuList: [],
+      isCollapse: false
     };
   },
   computed: {
@@ -111,6 +124,9 @@ export default {
   },
   methods: {
     ...mapMutations([UPDATE_CURRENT_PATHS]),
+    toggoleSidebar() {
+      this.isCollapse = !this.isCollapse;
+    },
     async getUserPrivileges(groupCode) {
       var url = CORE_API + "/rolePrivilege/getUserPrivileges";
       const params = new URLSearchParams();
@@ -163,6 +179,12 @@ export default {
 .el-menu-vertical-demo {
   height: calc(100vh - 60px - 70px);
 }
+
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 400px;
+}
+
 .el-aside {
   background: rgba(34, 44, 50, 1);
   color: #fff;

+ 1 - 0
src/plugins/vueAwesome.js

@@ -7,5 +7,6 @@ import "vue-awesome/icons/user";
 import "vue-awesome/icons/users";
 import "vue-awesome/icons/sign-out-alt";
 import "vue-awesome/icons/lock";
+import "vue-awesome/icons/bars";
 
 Vue.component("v-icon", Icon);

+ 1 - 0
src/styles/global.css

@@ -2,6 +2,7 @@
 
 body {
   margin: 0;
+  min-width: 1280px;
 }
 
 .qm-primary-text {