add 全屏功能

Andy
1 parent 3bafd7ad
Showing 2 changed files with 39 additions and 1 deletions
src/components/appHeader/index.vue
src/images/head/righttopbarico_Bg.png
@@ -2,6 +2,7 @@
   <div class="app-headBox">
     <span class="head-inner">
       <div class="head-name"> <span>{{headTitle}}</span><div class="head-name-bg"></div></div>
+      <div class="header-fullscreen" @click="handleFullScreen"></div>
       <div class="head-time">{{ headTime }}</div>
     </span>
   </div>
@@ -14,7 +15,8 @@
     data() {
       return {
         headTitle:"",//城市智慧停车大数据中心
-        headTime:''//当前时间
+        headTime:'',//当前时间
+        fullscreen: false
       }
     },
     mounted() {
@@ -30,6 +32,32 @@
           _self.headTime=common.getNowFormatDate();
         },1000);//1分钟更新一次
       },
+      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;
+       },
     }
   }
@@ -77,6 +105,16 @@
     left:280px;
     z-index: 10;
   }
+    .header-fullscreen{
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      position: absolute;
+      right: 158px;
+      top:25px;
+      cursor:pointer;
+      background: url('../../images/head/righttopbarico_Bg.png');
+    }
   .head-time{
     font-size:14px;
     color:#b2c2cf;