'header新增全屏和消息功能'

src/components/common/Header.vue

@@ -1,25 +1,45 @@
 <template>
     <div class="header">
+        <!-- 折叠按钮 -->
         <div class="collapse-btn" @click="collapseChage">
             <i class="el-icon-menu"></i>
         </div>
         <div class="logo">后台管理系统</div>
-        <div class="user-info">
-            <el-dropdown trigger="click" @command="handleCommand">
-                <span class="el-dropdown-link">
-                    <img class="user-logo" src="../../../static/img/img.jpg">
-                    {{username}}
-                </span>
-                <el-dropdown-menu slot="dropdown">
-                    <a href="http://blog.gdfengshuo.com/about/" target="_blank">
-                        <el-dropdown-item>关于作者</el-dropdown-item>
-                    </a>
-                    <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
-                        <el-dropdown-item>项目仓库</el-dropdown-item>
-                    </a>
-                    <el-dropdown-item divided  command="loginout">退出登录</el-dropdown-item>
-                </el-dropdown-menu>
-            </el-dropdown>
+        <div class="header-right">
+            <div class="header-user-con">
+                <!-- 全屏显示 -->
+                <div class="btn-fullscreen" @click="handleFullScreen">
+                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
+                        <i class="el-icon-rank"></i>
+                    </el-tooltip>
+                </div>
+                <!-- 消息中心 -->
+                <div class="btn-bell">
+                    <el-tooltip effect="dark" :content="message?`有${message}条未读消息`:`消息中心`" placement="bottom">
+                        <router-link to="/tabs">
+                            <i class="el-icon-bell"></i>
+                        </router-link>
+                    </el-tooltip>
+                    <span class="btn-bell-badge" v-if="message"></span>
+                </div>
+                <!-- 用户头像 -->
+                <div class="user-avator"><img src="static/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>
+                    </span>
+                    <el-dropdown-menu slot="dropdown">
+                        <a href="http://blog.gdfengshuo.com/about/" target="_blank">
+                            <el-dropdown-item>关于作者</el-dropdown-item>
+                        </a>
+                        <a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
+                            <el-dropdown-item>项目仓库</el-dropdown-item>
+                        </a>
+                        <el-dropdown-item divided  command="loginout">退出登录</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </div>
         </div>
     </div>
 </template>
@@ -29,7 +49,9 @@
         data() {
             return {
                 collapse: false,
-                name: 'linxin'
+                fullscreen: false,
+                name: 'linxin',
+                message: 2
             }
         },
         computed:{
@@ -39,15 +61,44 @@
             }
         },
         methods:{
+            // 用户名下拉菜单选择事件
             handleCommand(command) {
                 if(command == 'loginout'){
                     localStorage.removeItem('ms_username')
                     this.$router.push('/login');
                 }
             },
+            // 侧边栏折叠
             collapseChage(){
                 this.collapse = !this.collapse;
                 bus.$emit('collapse', this.collapse);
+            },
+            // 全屏事件
+            handleFullScreen(){
+                let element = document.documentElement;
+                if (this.fullscreen) {
+                    if (document.exitFullscreen) {
+                        document.exitFullscreen();
+                    } else if (document.webkitCancelFullScreen) {
+                        document.webkitCancelFullScreen();
+                    } else if (document.mozCancelFullScreen) {
+                        document.mozCancelFullScreen();
+                    } else if (document.msExitFullscreen) {
+                        document.msExitFullscreen();
+                    }
+                } else {
+                    if (element.requestFullscreen) {
+                        element.requestFullscreen();
+                    } else if (element.webkitRequestFullScreen) {
+                        element.webkitRequestFullScreen();
+                    } else if (element.mozRequestFullScreen) {
+                        element.mozRequestFullScreen();
+                    } else if (element.msRequestFullscreen) {
+                        // IE11
+                        element.msRequestFullscreen();
+                    }
+                }
+                this.fullscreen = !this.fullscreen;
             }
         }
     }
@@ -59,13 +110,14 @@
         width: 100%;
         height: 70px;
         font-size: 22px;
-        line-height: 70px;
+        
         color: #fff;
     }
     .collapse-btn{
         float: left;
         padding: 0 21px;
         cursor: pointer;
+        line-height: 70px;
     }
     .collapse-btn:hover{
         background: rgb(40,52,70);
@@ -73,30 +125,59 @@
     .header .logo{
         float: left;
         width:250px;
-        /* text-align: center; */
+        line-height: 70px;
     }
-    .user-info {
+    .header-right{
         float: right;
         padding-right: 50px;
-        font-size: 16px;
-        color: #fff;
     }
-    .user-info .el-dropdown-link{
+    .header-user-con{
+        display: flex;
+        height: 70px;
+        align-items: center;
+    }
+    .btn-fullscreen{
+        transform: rotate(45deg);
+        margin-right: 5px;
+        font-size: 24px;
+    }
+    .btn-bell, .btn-fullscreen{
         position: relative;
-        display: inline-block;
-        padding-left: 50px;
-        color: #fff;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        border-radius: 15px;
         cursor: pointer;
-        vertical-align: middle;
     }
-    .user-info .user-logo{
+    .btn-bell-badge{
         position: absolute;
-        left:0;
-        top:15px;
+        right: 0;
+        top: -2px;
+        width: 8px;
+        height: 8px;
+        border-radius: 4px;
+        background: #f56c6c;
+        color: #fff;
+    }
+    .btn-bell .el-icon-bell{
+        color: #fff;
+    }
+    .user-name{
+        margin-left: 10px;
+    }
+    .user-avator{
+        margin-left: 20px;
+    }
+    .user-avator img{
+        display: block;
         width:40px;
         height:40px;
         border-radius: 50%;
     }
+    .el-dropdown-link{
+        color: #fff;
+        cursor: pointer;
+    }
     .el-dropdown-menu__item{
         text-align: center;
     }