增加右侧伸缩开关。

src/assets/iconfont/iconfont.css

@@ -1,10 +1,11 @@
-@font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1582177544808'); /* IE9 */
-  src: url('iconfont.eot?t=1582177544808#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMkAAsAAAAABvgAAALXAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCBIIDATYCJAMICwYABCAFhG0HMBspBsgOJUHy2IBhBgVgBPX7oXvvvxCASzwACgcFxba2KroSyLgaU5Z1merq/3/7/bq4Jw6TwL82TPy+Lz5vELeonvAm2nwttE17NmPA5fRblMg8oBzX3rawwOKAAhpjWLSFC6TAuGHsJoIHeJxArUGBjNbjU3PBUgbGBeKxQlYFlgWd3FEcqoXKhqV5x2iSmer0Oj0DuOOfj38giWqSigIoO76Oq4XI+wWYVrwqO5VSAn85C5xVFJgHMnHeaDtkImPzTNRGMVOj4FjFwb20/Ka8w/7xCKISKKwH/TrvmfhY8Ki/TCCjElfAk0lhKmvqYNcBZ1XXzvBp59nILoo06+Evnds2brPi6tT8Devhb6/Q6blmPfzJ23senZhb8B5dPz9sRr6/Yedrbl7+a+3wj/fo7ORGj0tRWVCp6GLLyvHeo+nN0JKDx32/pIFQ0j/dX+v+ufDPyb1quaB0rijoQdzm8La1R197c5fo27rOr1Vql6/L9HiS0tBbMx2T1hgt9pIZwvNcfSpXMkqH1gzPSmZlKV4xDJEA5WqeKcr+93f0/k9/KxxC/1fXZfCHhVtywTAHqL4re/B3K/I0KL/zjCsE0ZTRwTNSyRXzu5bWxk4lAFerP1NVHa9iCdUFvoOkygAK1cZJmTaPCnUWUanaEmrNSVhdpw1lInINZvVpCM0OkTT6ikKzF1Km/UaFTn9RqTkK1LoMly3rTMYD6xiKVQxrSXUTUdTotBwyMmtRnI2yOnUVzQs5Ix8prwgSsUBUTiagFukSM/h6mYQxjnBUpyHx2mmoVuuInuqUWMMEcsb0wUIh13QlQY1OA9bWUKgKg2oR1ZoQCjV0tDjamrGuvD8bkqmjVoV21I248yGKp+icEBMQDSAlyLSD6h7lEl49GQmG4RAcSkeDiNcsSA1jOoS+eZASqsEIyCdE9IIJjUbcUJlge4Xm77ZBLaBOAfsVKl+iolGhBQAA') format('woff2'),
-  url('iconfont.woff?t=1582177544808') format('woff'),
-  url('iconfont.ttf?t=1582177544808') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1582177544808#iconfont') format('svg'); /* iOS 4.1- */
+@font-face {
+  font-family: "iconfont";
+  src: url('iconfont.eot?t=1585038896941'); /* IE9 */
+  src: url('iconfont.eot?t=1585038896941#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOoAAsAAAAAB+gAAANZAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDFIJtATYCJAMQCwoABCAFhG0HVRvsBsgOJQXBwMDIAUFgBNV+nz379gBQASq0ROrUsSJMJKCNIiGjTGSETaX8oUz5/786TQWy32vCHqupcBDcDphd+0tRSD5ZZXKOcGKajjfAjWDYAGcfXE7/v6JE5lmW05q05sICiyZQQHtjtIULKEFuGLuJoCGeJ1Ct3wRFy/OWrEGVMjAtEDeM6qgyI5MbkkOlUF6xNg8W7UNlKtPX4lf4xr8fLyajkqSsAOZunc010Yz7o0/Jkl631yFFEGc6DYxNFJiAZOKiUnekJPJNKFHt/abULKRSpcT90fsLT0nXlblHEVfCvzxCUhDlQGItmFZExYVxMJ3g/gKdxFNS4iFxWVopB95DfqmE3vQQypv9VSo8tM9vOOf7NEqO9F0ohOBwb9A8xJ1wmqzRo4VzzGK/s5m+y86d3ruFKyDCFOdi7yXVrLdJmbvuvOK8eYO+9J1VnPO1tUfQhWvWvyvqe/9eLbx9C71v1qxd90Zx3r3z0tZUqw0dIzNmgj4tmic8snZNa7iVBFvQ5Xo19ZyRsEdrmTlzxswRzYM232gPYlsnbondv1jlfaZ5jtcc92jPhicrkDTxQ/i94Q9H/zeF9VPrtxzeOPF5POA55R+wzMd71+s7z9lnd+RPPdpqwe3FLYPGgdlLW2fFa+jOaWuDdTtOL98ydhZZTq/YsQXbHfQaaEp/0h+eUDqTD5Zs/XXjTP916XbPlP+V6qU3/TvxEFO43STo/XM6c35UST6AlNx80OQBec4uB0t+dvfLdvyJWQnVqlGSTM2+TSFt65xIqNSWQFKhDwqVBtBMmIAyNaahXKU5qDZu/uYaLYQSkaswZkiC0OgGJPV+Q6HRazQTvkKZdt+hXGOUQLXtCOxZYyiYMluALsHEjW2YGTxPkFIqInkV0KasLtI8TloHwmZOHI/E8sH5kAcxxQK7mSakJJgInsPzpMsgm+XYEjwNhoykpLQmRaOk6kYRg+eQYokAdBIwYY3aYIyByyO0saQUPr8KoJpk6URDVY9xHSDYWO9YXESsAzpfnO9UdSvX2JpRCZJEYITA5WDzJA3IQh+HWdWj0oBBikgN8FgmiSq1SFdxZHlp7g13QTUwLEeKInKUabj2kduzQOR2XQje4s06BKMpPbu8BVgryyMEAAAA') format('woff2'),
+  url('iconfont.woff?t=1585038896941') format('woff'),
+  url('iconfont.ttf?t=1585038896941') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1585038896941#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -15,15 +16,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-icon_left_arrow:before {
+  content: "\e697";
+}
+
+.icon-icon_right_arrow:before {
+  content: "\e6a7";
+}
+
 .icon-weixin:before {
   content: "\e933";
 }
-
-.el-menu .iconfont{
-  vertical-align: middle;
-  margin-left: 5px;
-  margin-right: 5px;
-  width: 24px;
-  text-align: center;
-  font-size: 18px;
-}

src/assets/iconfont/iconfont.json

@@ -5,6 +5,20 @@
   "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": "7736497",
       "name": "weixin",

src/assets/iconfont/iconfont.svg

@@ -20,6 +20,12 @@ Created by iconfont
   />
     <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="weixin" unicode="&#59699;" d="M331.428571 632.571429q0 23.428571-14.285714 37.714285t-37.714286 14.285715q-24.571429 0-43.428571-14.571429T217.142857 632.571429q0-22.285714 18.857143-36.857143t43.428571-14.571429q23.428571 0 37.714286 14t14.285714 37.428572z m424.571429-289.714286q0 16-14.571429 28.571428t-37.428571 12.571429q-15.428571 0-28.285714-12.857143T662.857143 342.857143q0-16 12.857143-28.857143t28.285714-12.857143q22.857143 0 37.428571 12.571429t14.571429 29.142857zM621.142857 632.571429q0 23.428571-14 37.714285T569.714286 684.571429q-24.571429 0-43.428572-14.571429T507.428571 632.571429q0-22.285714 18.857143-36.857143t43.428572-14.571429q23.428571 0 37.428571 14T621.142857 632.571429z m362.857143-289.714286q0 16-14.857143 28.571428t-37.142857 12.571429q-15.428571 0-28.285714-12.857143T890.857143 342.857143q0-16 12.857143-28.857143t28.285714-12.857143q22.285714 0 37.142857 12.571429t14.857143 29.142857z m-152 226.857143q-17.714286 2.285714-40 2.285714-96.571429 0-177.714286-44T486.571429 408.857143 440 244.571429q0-44.571429 13.142857-86.857143-20-1.714286-38.857143-1.714286-14.857143 0-28.571428 0.857143t-31.428572 3.714286-25.428571 4-31.142857 6-28.571429 6L124.571429 104l41.142857 124.571429q-165.714286 116-165.714286 280 0 96.571429 55.714286 177.714285t150.857143 127.714286T414.285714 860.571429q100.571429 0 190-37.714286t149.714286-104.285714T832 569.714286z m338.285714-320.571429q0-66.857143-39.142857-127.714286T1025.142857 10.857143l31.428572-103.428572-113.714286 62.285715q-85.714286-21.142857-124.571429-21.142857-96.571429 0-177.714285 40.285714T512.857143 98.285714 466.285714 249.142857t46.571429 150.857143T640.571429 509.428571t177.714285 40.285715q92 0 173.142857-40.285715t130-109.714285T1170.285714 249.142857z"  horiz-adv-x="1170" />
 
     

src/components/MenuTreeItem/index.vue

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

src/views/layout/index.vue

@@ -11,13 +11,18 @@
       </div>
     </el-header>
     <el-container>
-      <el-aside width="200px" v-loading="loading">
-        <el-menu
-          class="el-menu-vertical-demo"
-          @open="handleOpen"
-          @close="handleClose"
-          @select="handleSelect"
-        >
+        <el-aside :width="sidebarWidth" v-loading="loading" class="sidebar">
+          <div class="sidebar-collpase-btn" @click="collapse=!collapse" style="cursor:pointer">
+            <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>
       </el-aside>
@@ -39,9 +44,22 @@ export default {
       menuList: [],
       loading: false,
       user: {},
-      messageNum: 0
+      messageNum: 0,
+      collapse: false
     };
   },
+  computed:{
+    sidebarWidth() {
+      return !this.collapse ? "200px" : "64px";
+    },
+    sidbarHandlerClass(){
+      return {
+        "iconfont" : true,
+        "icon-icon_left_arrow" : this.collapse,
+        "icon-icon_right_arrow" : !this.collapse
+      }
+    }
+  },
   // created() {
   //   //获取未读消息数
   //   this.getUnReadMessageNum();
@@ -175,4 +193,25 @@ 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:200px;
+  right:-12px;
+  background-color:#eeeeee;
+  z-index: 10000;
+  padding-top:30px;
+  padding-right:4px;
+  color:black;
+  font-weight: bold;
+}
 </style>