使用 el-icon-s-fold 和 el-icon-s-unfold 两个 icon 来展示侧边栏的展开和折叠

src/views/admin/TopNav.vue

@@ -1,8 +1,13 @@
 <template>
   <el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
-    <el-button class="buttonimg">
+    <!--    <el-button class="buttonimg">
       <img class="showimg" :src="collapsed ? imgshow : imgsq" @click="doToggle()">
-    </el-button>
+    </el-button>-->
+    <el-button
+      class="button_icon"
+      :icon="collapsed ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
+      @click="doToggle()"
+    />
     <el-submenu index="2" class="submenu">
       <template slot="title">{{ user.screenName }}</template>
       <el-menu-item index="2-1" @click="backToHome">
@@ -36,7 +41,6 @@ export default {
   },
   created() {
     this.user = getAuthedUser()
-    console.log(this.user)
   },
   methods: {
     doToggle() { // 主要控制collapsed为true和false
@@ -76,6 +80,12 @@ export default {
   border: none;
 }
 
+.button_icon {
+  height: 60px;
+  background-color: transparent;
+  border: none;
+}
+
 .showimg {
   width: 26px;
   height: 26px;