变更折叠侧边栏图标

src/components/common/Header.vue

@@ -2,7 +2,8 @@
     <div class="header">
         <!-- 折叠按钮 -->
         <div class="collapse-btn" @click="collapseChage">
-            <i class="el-icon-menu"></i>
+            <i v-if="!collapse" class="el-icon-s-fold"></i>
+            <i v-else class="el-icon-s-unfold"></i>
         </div>
         <div class="logo">后台管理系统</div>
         <div class="header-right">
@@ -15,7 +16,11 @@
                 </div>
                 <!-- 消息中心 -->
                 <div class="btn-bell">
-                    <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
+                    <el-tooltip
+                        effect="dark"
+                        :content="message?`有${message}条未读消息`:`消息中心`"
+                        placement="bottom"
+                    >
                         <router-link to="/tabs">
                             <i class="el-icon-bell"></i>
                         </router-link>
@@ -23,11 +28,14 @@
                     <span class="btn-bell-badge" v-if="message"></span>
                 </div>
                 <!-- 用户头像 -->
-                <div class="user-avator"><img src="../../assets/img/img.jpg"></div>
+                <div class="user-avator">
+                    <img src="../../assets/img/img.jpg" />
+                </div>
                 <!-- 用户名下拉菜单 -->
                 <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                     <span class="el-dropdown-link">
-                        {{username}} <i class="el-icon-caret-bottom"></i>
+                        {{username}}
+                        <i class="el-icon-caret-bottom"></i>
                     </span>
                     <el-dropdown-menu slot="dropdown">
                         <a href="http://blog.gdfengshuo.com/about/" target="_blank">
@@ -52,7 +60,7 @@
             fullscreen: false,
             name: 'linxin',
             message: 2
-            }
+        };
     },
     computed: {
         username() {
@@ -64,7 +72,7 @@
         // 用户名下拉菜单选择事件
         handleCommand(command) {
             if (command == 'loginout') {
-                    localStorage.removeItem('ms_username')
+                localStorage.removeItem('ms_username');
                 this.$router.push('/login');
             }
         },
@@ -106,7 +114,7 @@
             this.collapseChage();
         }
     }
-    }
+};
 </script>
 <style scoped>
 .header {
@@ -142,7 +150,8 @@
     margin-right: 5px;
     font-size: 24px;
 }
-    .btn-bell, .btn-fullscreen{
+.btn-bell,
+.btn-fullscreen {
     position: relative;
     width: 30px;
     height: 30px;