变更折叠侧边栏图标

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">
@@ -44,37 +52,37 @@
     </div>
 </template>
 <script>
-    import bus from '../common/bus';
+import bus from '../common/bus';
-    export default {
+export default {
     data() {
         return {
             collapse: false,
             fullscreen: false,
             name: 'linxin',
             message: 2
-            }
+        };
     },
-        computed:{
+    computed: {
-            username(){
+        username() {
             let username = localStorage.getItem('ms_username');
             return username ? username : this.name;
         }
     },
-        methods:{
+    methods: {
         // 用户名下拉菜单选择事件
         handleCommand(command) {
-                if(command == 'loginout'){
+            if (command == 'loginout') {
-                    localStorage.removeItem('ms_username')
+                localStorage.removeItem('ms_username');
                 this.$router.push('/login');
             }
         },
         // 侧边栏折叠
-            collapseChage(){
+        collapseChage() {
             this.collapse = !this.collapse;
             bus.$emit('collapse', this.collapse);
         },
         // 全屏事件
-            handleFullScreen(){
+        handleFullScreen() {
             let element = document.documentElement;
             if (this.fullscreen) {
                 if (document.exitFullscreen) {
@@ -101,56 +109,57 @@
             this.fullscreen = !this.fullscreen;
         }
     },
-        mounted(){
+    mounted() {
-            if(document.body.clientWidth < 1500){
+        if (document.body.clientWidth < 1500) {
             this.collapseChage();
         }
     }
-    }
+};
 </script>
 <style scoped>
-    .header {
+.header {
     position: relative;
     box-sizing: border-box;
     width: 100%;
     height: 70px;
     font-size: 22px;
     color: #fff;
-    }
+}
-    .collapse-btn{
+.collapse-btn {
     float: left;
     padding: 0 21px;
     cursor: pointer;
     line-height: 70px;
-    }
+}
-    .header .logo{
+.header .logo {
     float: left;
-        width:250px;
+    width: 250px;
     line-height: 70px;
-    }
+}
-    .header-right{
+.header-right {
     float: right;
     padding-right: 50px;
-    }
+}
-    .header-user-con{
+.header-user-con {
     display: flex;
     height: 70px;
     align-items: center;
-    }
+}
-    .btn-fullscreen{
+.btn-fullscreen {
     transform: rotate(45deg);
     margin-right: 5px;
     font-size: 24px;
-    }
+}
-    .btn-bell, .btn-fullscreen{
+.btn-bell,
+.btn-fullscreen {
     position: relative;
     width: 30px;
     height: 30px;
     text-align: center;
     border-radius: 15px;
     cursor: pointer;
-    }
+}
-    .btn-bell-badge{
+.btn-bell-badge {
     position: absolute;
     right: 0;
     top: -2px;
@@ -159,27 +168,27 @@
     border-radius: 4px;
     background: #f56c6c;
     color: #fff;
-    }
+}
-    .btn-bell .el-icon-bell{
+.btn-bell .el-icon-bell {
     color: #fff;
-    }
+}
-    .user-name{
+.user-name {
     margin-left: 10px;
-    }
+}
-    .user-avator{
+.user-avator {
     margin-left: 20px;
-    }
+}
-    .user-avator img{
+.user-avator img {
     display: block;
-        width:40px;
+    width: 40px;
-        height:40px;
+    height: 40px;
     border-radius: 50%;
-    }
+}
-    .el-dropdown-link{
+.el-dropdown-link {
     color: #fff;
     cursor: pointer;
-    }
+}
-    .el-dropdown-menu__item{
+.el-dropdown-menu__item {
     text-align: center;
-    }
+}
 </style>