Browse Source

左侧导航改成可关闭打开的

niuheng 2 years ago
parent
commit
03e99ba4c2
3 changed files with 96 additions and 34 deletions
  1. 0 1
      src/Main.vue
  2. 21 7
      src/components/frame/leftMenu.vue
  3. 75 26
      src/components/frame/pageLeft.vue

+ 0 - 1
src/Main.vue

@@ -38,7 +38,6 @@ export default {
 }
 
 .leftRegion {
-  width: 235px;
   height: 100%;
 }
 .rightRegion {

+ 21 - 7
src/components/frame/leftMenu.vue

@@ -27,8 +27,21 @@
         :class="'leftMenuIconfont ' + menu.icon"
         v-if="!!menu.icon"
       ></i> -->
-      <img :src="menu.state == 'normal' ? menu.normalImg : menu.activeImg" />
+      <el-tooltip
+        v-if="!leftIsOpen"
+        effect="dark"
+        :content="menu.name"
+        placement="right"
+        popper-class="leftCloseTip"
+      >
+        <img :src="menu.state == 'normal' ? menu.normalImg : menu.activeImg" />
+      </el-tooltip>
+      <img
+        v-if="leftIsOpen"
+        :src="menu.state == 'normal' ? menu.normalImg : menu.activeImg"
+      />
       <span
+        v-if="leftIsOpen"
         slot="title"
         v-text="menu.name"
         style="margin-left: 6px"
@@ -42,29 +55,30 @@
 <script>
 export default {
   name: "leftMenu",
-  props: ["menu"],
+  props: ["menu", "leftIsOpen"],
   data() {
     return {
       routerPath: "",
     };
   },
   computed: {},
-  methods: {
-  },
-  created() {
-  },
+  methods: {},
+  created() {},
 
   mounted() {},
   components: {},
 };
 </script>
 
-<style scoped>
+<style>
 .menuIcon {
   margin-right: 6px;
   color: #fff;
   width: 20px;
   height: 20px;
 }
+.leftCloseTip {
+  left: 58px !important;
+}
 </style>
 

+ 75 - 26
src/components/frame/pageLeft.vue

@@ -1,32 +1,60 @@
 <template>
-  <div id="pageLeft">
-    <div class="topContainer">
-      <div class="logoDiv">
-        <img :src="logoUrl" class="logoImg" />
+  <div id="pageLeft" :class="{leftClose:!leftIsOpen}">
+    <div class="leftContainer" v-if="leftIsOpen">
+      <div class="topContainer">
+        <div class="logoDiv">
+          <img :src="logoUrl" class="logoImg" />
+        </div>
+        <div class="middDiv">
+          <i class="el-icon-fa-bars fa fa-bars" @click="toggleLeft"></i>
+        </div>
       </div>
-      <div class="middDiv">
-        <i class="el-icon-fa-bars fa fa-bars"></i>
+      <div class="menuDiv">
+        <el-menu
+          text-color="#fff"
+          active-text-color="#ffd04b"
+          background-color="#364150"
+          router
+        >
+          <el-menu-item-group v-for="menu in menus" :key="menu.id">
+            <template slot="title">
+              <span v-text="menu.name"></span>
+            </template>
+            <leftMenu
+              :menu="subMenu"
+              v-for="subMenu in menu.children"
+              :key="subMenu.id"
+              :index="subMenu.id"
+              :leftIsOpen="leftIsOpen"
+            ></leftMenu>
+          </el-menu-item-group>
+        </el-menu>
       </div>
     </div>
-    <div class="menuDiv">
-      <el-menu
-        text-color="#fff"
-        active-text-color="#ffd04b"
-        background-color="#364150"
-        router
-      >
-        <el-menu-item-group v-for="menu in menus" :key="menu.id">
-          <template slot="title">
-            <span v-text="menu.name"></span>
-          </template>
-          <leftMenu
-            :menu="subMenu"
-            v-for="subMenu in menu.children"
-            :key="subMenu.id"
-            :index="subMenu.id"
-          ></leftMenu>
-        </el-menu-item-group>
-      </el-menu>
+    <div class="leftContainer" v-if="!leftIsOpen">
+      <div class="topContainer">
+        <div class="middDiv middDivClose">
+          <i class="el-icon-fa-bars fa fa-bars el-icon-fa-barsClose" @click="toggleLeft"></i>
+        </div>
+      </div>
+      <div class="menuDiv">
+        <el-menu
+          text-color="#fff"
+          active-text-color="#ffd04b"
+          background-color="#364150"
+          router
+        >
+          <el-menu-item-group v-for="menu in menus" :key="menu.id">
+            <leftMenu
+              :menu="subMenu"
+              v-for="subMenu in menu.children"
+              :key="subMenu.id"
+              :index="subMenu.id"
+              :leftIsOpen="leftIsOpen"
+            ></leftMenu>
+          </el-menu-item-group>
+        </el-menu>
+      </div>
     </div>
   </div>
 </template>
@@ -37,13 +65,18 @@ export default {
   props: [],
   data() {
     return {
+      leftIsOpen: true,
       logoUrl: require("@/assets/images/logo.png"),
     };
   },
   computed: {
     ...mapState(["menus"]),
   },
-  methods: {},
+  methods: {
+    toggleLeft: function () {
+      this.leftIsOpen = !this.leftIsOpen;
+    },
+  },
   created() {},
 
   mounted() {},
@@ -57,8 +90,16 @@ export default {
 #pageLeft {
   width: 235px;
   height: 100%;
+}
+
+.leftClose{
+  width:64px !important;
+}
+
+.leftContainer {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .topContainer {
@@ -97,6 +138,10 @@ export default {
   cursor: pointer;
 }
 
+.el-icon-fa-barsClose{
+  margin-left: 0;
+}
+
 .logoDiv {
   flex: 1;
 }
@@ -105,6 +150,10 @@ export default {
   flex: 1;
 }
 
+.middDivClose{
+  text-align: center;
+}
+
 .el-menu-item-group__title span {
   font-size: 14px !important;
   color: #68707b;