Post.vue 删除 el-aside, 添加 el-menu 的 collapse 属性

src/views/post/Post.vue

@@ -11,6 +11,12 @@
           </li>
         </ul>
       </el-col>
+      <el-col :md="10">
+        <el-radio-group v-model="isCollapse" size="mini">
+          <el-radio-button :label="false">展开</el-radio-button>
+          <el-radio-button :label="true">收起</el-radio-button>
+        </el-radio-group>
+      </el-col>
       <el-dropdown>
         <img
           :src="user.avatarUrl"
@@ -33,12 +39,15 @@
       </el-dropdown>
     </el-header>
     <el-container>
-      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
+      <el-row>
+      </el-row>
+      <el-row>
         <el-menu
           :default-active="this.$route.path"
           router
           class="el-menu-vertical-demo"
           :unique-opened="true"
+          :collapse="isCollapse"
         >
           <el-submenu index="/post/video">
             <template slot="title">
@@ -69,7 +78,7 @@
             <span slot="title">历史记录</span>
           </el-menu-item>
         </el-menu>
-      </el-aside>
+      </el-row>
       <el-main>
         <router-view />
       </el-main>
@@ -87,7 +96,8 @@ export default {
   data() {
     return {
       user: null,
-      loginUser: null
+      loginUser: null,
+      isCollapse: true
     }
   },
   created() {
@@ -111,4 +121,9 @@ export default {
 .el-aside {
   color: #333;
 }
+
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 400px;
+}
 </style>