增加侧边栏收缩功能。

src/assets/iconfont/iconfont.css

@@ -0,0 +1,33 @@
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1584943280080'); /* IE9 */
+  src: url('iconfont.eot?t=1584943280080#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQQAAsAAAAACLgAAAPDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqEQINpATYCJAMUCwwABCAFhG0HXRuKB8iemjwtLODBbRYLAHBxAkTwtdftu/K5uU/pDlSpEt/HR2FUFAqJcCBkhI4w4BA+46mSA733LyrpTcLUpBa2h6kd+YU1+z9nfwhqsxFmY1U1ogO0xZQgSwdCHTx/RhzK4HaQQDAN1Pqf+/m6FM9rz+ZSTdFFa9oZjUfROqCI/kEfpI8H0Afjv8huyUewThPo9ulB7j1O76KsQJMCMU21VFFOSJSK+NCEoWBlgXgFQkt16COAF+/34w9M4gJJzYBmTnZtiNmHfrHESJqECAcFrOFUENeRcQEU4rFQM5ULPBcwXf+7vGtC1yTpM/S153XmiyVNAxjcDYk7FhriHy8pxABIuMzgrwXl4FgUIfPZgxB8ziAk/izZD+acCjpGzAEsWPyBMB7N/XlTRAjH+QR5BUyE4uunKcnkpD9qpkE8sYsUS+jMrpeIEyWTexqm6NkvOZnNNz0vQwws8PI3zAH+PBvHT/BFCIPQ8XVLID2S/F3i0Bl0zUKoiZWDhr2jNSAZQZOnckNnDReKw+fpDEYAymQGstnBGIsVCr+z5Byv8+0Zw+2apYI0LFDzPBAxwfa8Yio36BUwOTi013AwMqyBQa/6WQgYXkHJGidn1OPaFZSoCQy4dUps/1X8C/DGXseXhKBksfN8Nv+SFIT/9K5UgsyiJaLvorWisyK1rw6n5OlRmYOTg+GW4ijPPc+oYqvMvUxvuJCLlyT3+33aaEtaRM4Gdpx+/Pzh5aI8KC6ee6Bp39LTM74kobnFLxk2oSevJCAsJyzgBMUQXl7Pz7S4EJPDZjn5THZo27vO/3lpPen5/zr7Mi08QRXpA/3tTcozDAekd+wfGGae2ucd3bL7x8Wb32ExnLvKSormuiadusgbZzXMKwYHSWvRsilTs1YT71OY9LKO92zY9DKMeKdxLKHZiSBZsgdZc4Au+AuoRpcwaK6gO+e5frQlT04UbuBMFUBYtwLJqjfI1j2hC/4Zql3fYLAeBt1DojuOjkrlcc1DldGAuFJIjY9Ck8i56se/opX6KsU5HuET6ezYwdjAKO3fYog0xJz8ImtcUGBCUl4UgAech74fQU5e5KLO/ZQCjiVDw6SiF+rHZwei6g5BKoYMIM4dSKWLhEynNKtmfv4VsqR8KqrIqVN/QuTM6R4YM2DUAL0Vho1yLuU5+S4sYwWYCSQhkQDwABXysScCcoqHuZCO9aV0cMUkhmyhpKbC/vTi4B7XQYcG10ARDMERAuGAtYMfKvtosqwSRdd20kaOZQuLipmJoeuEheLE0EiFAAA=') format('woff2'),
+  url('iconfont.woff?t=1584943280080') format('woff'),
+  url('iconfont.ttf?t=1584943280080') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1584943280080#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-icon_left_arrow:before {
+  content: "\e697";
+}
+
+.icon-icon_right_arrow:before {
+  content: "\e6a7";
+}
+
+.icon-menjin:before {
+  content: "\e659";
+}
+
+.icon-wendu:before {
+  content: "\eb37";
+}
+

src/assets/iconfont/iconfont.json

@@ -0,0 +1,37 @@
+{
+  "id": "1708149",
+  "name": "荆鹏云管家",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "1624963",
+      "name": "icon_left_arrow",
+      "font_class": "icon_left_arrow",
+      "unicode": "e697",
+      "unicode_decimal": 59031
+    },
+    {
+      "icon_id": "1625003",
+      "name": "icon_right_arrow",
+      "font_class": "icon_right_arrow",
+      "unicode": "e6a7",
+      "unicode_decimal": 59047
+    },
+    {
+      "icon_id": "6368198",
+      "name": "门禁",
+      "font_class": "menjin",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "7335567",
+      "name": "温度",
+      "font_class": "wendu",
+      "unicode": "eb37",
+      "unicode_decimal": 60215
+    }
+  ]
+}

src/assets/iconfont/iconfont.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="icon_left_arrow" unicode="&#59031;" d="M341.258291 14.530181a27.79095 27.79095 0 0 0-19.713994 8.16803c-10.887978 10.884908-10.887978 28.537963 0 39.423894l321.840032 321.845149-321.911663 321.910641c-10.887978 10.887978-10.887978 28.541033 0 39.429011 10.890025 10.884908 28.537963 10.884908 39.429011 0L702.524265 403.681248c10.890025-10.887978 10.890025-28.541033 0-39.429011L360.972285 22.698211a27.79095 27.79095 0 0 0-19.713994-8.16803z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="icon_right_arrow" unicode="&#59047;" d="M682.741709 14.530181c-7.133468 0-14.272052 2.723018-19.711947 8.16803L321.472666 364.252237c-10.887978 10.887978-10.887978 28.541033 0 39.429011l341.627704 341.625658c10.879792 10.884908 28.544103 10.884908 39.423895 0 10.890025-10.887978 10.890025-28.541033 0-39.429011L380.616694 383.967254l321.836962-321.845149c10.890025-10.884908 10.890025-28.537963 0-39.423894-5.439896-5.445012-12.57848-8.16803-19.711947-8.16803z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="menjin" unicode="&#58969;" d="M756.149 3.279h-488.1c-24.262 0-44 19.738-44 44V727.01c0 24.262 19.738 44 44 44h488.1c24.262 0 44-19.738 44-44v-679.73c0-24.262-19.738-44.001-44-44.001z m-468.099 64h448.1V707.01h-448.1v-639.731zM98.004 67.279h829.991v-64H98.004zM657.522 185.001H371c-6.6 0-12 5.4-12 12v202c0 6.6 5.4 12 12 12h286.522c6.6 0 12-5.4 12-12v-202c0-6.6-5.4-12-12-12zM515 278.001c-32.32 0-61.944 13.058-83.415 36.767C409.614 339.031 398 371.909 398 409.848c0 37.69 11.016 72.986 31.019 99.388 21.384 28.223 50.889 43.767 83.081 43.767 31.766 0 62.923-15.723 85.482-43.136C619.776 482.897 632 447.376 632 409.848c0-37.939-11.614-70.817-33.586-95.081-21.47-23.708-51.094-36.766-83.414-36.766z m-2.9 235.001c-41.551 0-74.1-45.311-74.1-103.154 0-54.079 31.664-91.847 77-91.847 45.337 0 77 37.769 77 91.847 0 55.916-36.59 103.154-79.9 103.154z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="wendu" unicode="&#60215;" d="M512 768a192 192 0 0 1-192-192v-384a192 192 0 1 1 384 0V576a192 192 0 0 1-192 192z m128-288v-32a32 32 0 0 1 0-64v-32a32 32 0 0 1 0-64v-96a128 128 0 1 0-256 0v96a32 32 0 0 1 0 64v32a32 32 0 0 1 0 64v32a32 32 0 1 1 0 64v32a128 128 0 1 0 256 0v-32a32 32 0 1 1 0-64z m-160-232.576a64 64 0 1 1 64 0V576a32 32 0 1 1-64 0v-328.576z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

src/components/MenuTreeItem/index.vue

@@ -33,6 +33,20 @@ export default {
 }
 </script>
 
-<style>
-
+<style lang="scss" scoped>
+  .el-menu--collapse {
+    .menu-wrapper{
+      .el-submenu {
+        .el-submenu__title {
+          span {
+            height: 0;
+            width: 0;
+            overflow: hidden;
+            visibility: hidden;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
 </style>

src/main.js

@@ -5,6 +5,7 @@ import store from './store'
 import echarts from 'echarts'
 import './plugins/element.js'
 import AxiosPlugin from './plugins/AxiosPlugin'
+import './assets/iconfont/iconfont.css'
 
 Vue.config.productionTip = false
 Vue.use(AxiosPlugin)

src/views/layout/index.vue

@@ -9,12 +9,17 @@
       </div>
     </el-header>
     <el-container>
-      <el-aside width="200px" v-loading="loading">
+      <el-aside :width="sidebarWidth" v-loading="loading" class="sidebar">
+        <div class="sidebar-collpase-btn" @click="collapse=!collapse">
+          <i :class="sidbarHandlerClass"></i>
+        </div>
         <el-menu
           class="el-menu-vertical-demo"
           @open="handleOpen"
           @close="handleClose"
           @select="handleSelect"
+          :collapse="collapse"
+          :collapse-transition="false"
         >
           <menu-tree-item :routes="menuList"></menu-tree-item>
         </el-menu>
@@ -35,9 +40,22 @@ export default {
     return {
       menuList: [],
       loading: false,
+      collapse: false,
       user: {}
     };
   },
+  computed:{
+    sidebarWidth() {
+      return !this.collapse ? "200px" : "64px";
+    },
+    sidbarHandlerClass(){
+      return {
+        "iconfont" : true,
+        "icon-icon_left_arrow" : this.collapse,
+        "icon-icon_right_arrow" : !this.collapse
+      }
+    }
+  },
   methods: {
     handleOpen(key, keyPath) {
       console.log(key, keyPath);
@@ -144,4 +162,24 @@ export default {
     text-decoration: underline;
   }
 }
+
+.sidebar{
+  position:relative;
+  overflow:visible !important;
+}
+
+.sidebar-collpase-btn{
+  position:absolute;
+  width:12px;
+  height:53px;
+  border-radius: 0px 10px 10px 0px;
+  top:250px;
+  right:-12px;
+  background-color:#eeeeee;
+  z-index: 10000;
+  padding-top:30px;
+  padding-right:4px;
+  color:black;
+  font-weight: bold;
+}
 </style>