菜单折叠

src/components/Home.vue

@@ -8,8 +8,10 @@
       <el-button type="info" @click="logout">退出</el-button>
     </el-header>
     <el-container>
-      <el-aside width="200px">
-        <el-menu unique-opened
+      <el-aside :width="isCollapsed ? '64px' : '200px'">
+        <div @click="toggleCollapse" class="toggle-button">|||</div>
+
+        <el-menu unique-opened :collapse="isCollapsed" :collapse-transition="false"
           background-color="#313743"
           text-color="#fff"
           active-text-color="#3497FF">
@@ -49,10 +51,15 @@ export default {
         101: 'iconfont icon-shangpin',
         102: 'iconfont icon-danju',
         145: 'iconfont icon-baobiao'
-      }
+      },
+      isCollapsed: false,
+      width: '200px'
     }
   },
   methods: {
+    toggleCollapse () {
+      this.isCollapsed = !this.isCollapsed
+    },
     logout () {
       sessionStorage.clear()
       this.$router.push('/login')
@@ -107,4 +114,13 @@ export default {
   .el-menu {
     border-right: none;
   }
+  .toggle-button{
+    background-color: #495164;
+    color: #ffffff;
+    font-size: 10px;
+    line-height: 24px;
+    text-align: center;
+    letter-spacing: .2em;
+    cursor: pointer;
+  }
 </style>