add fullscreen

Andy
1 parent db9d0707
Showing 1 changed file with 52 additions and 1 deletions
src/components/VHeader.vue
 <template>
     <header class="header-wrap">
         <span>车场实时概况</span>
+        <div class="header-fullscreen" @click="toggleFullScreen($event)">全屏</div>
         <div class="header-time">
             <p>{{headerDay}}</p>
             <p>{{headerTime}}</p>
@@ -14,11 +15,52 @@ import { formateTime, formateday } from &quot;../utils/formate&quot;;
 export default {
   name: 'VHeader',
   data() {
+      isFullscreen:true;
     return {
       headerDay: formateday(),
       headerTime: formateTime(),
     }
-  }
+  },
+    methods:{
+
+        FullScreen(el){
+            if(this.isFullscreen){//退出全屏
+                if(document.exitFullscreen){
+                    document.exitFullscreen()
+                }else if( document.mozCancelFullScreen){
+                    document.mozCancelFullScreen()
+                }else if(document.webkitExitFullscreen){
+                    //改变平面图在google浏览器上面的样式问题
+                    $("#canvasPaintArea").css("position","static").css("width","100%");
+                    $(".buildingsFloor").css("width","70%");
+                    $(".floor-plan").css("width","78%");
+                    document.webkitExitFullscreen()
+                }else if(!document.msRequestFullscreen){
+                    document.msExitFullscreen()
+                }
+            }else{    //进入全屏
+                if(el.requestFullscreen){
+                    el.requestFullscreen()
+                }else if(el.mozRequestFullScreen){
+                    el.mozRequestFullScreen()
+                }else if(el.webkitRequestFullscreen){
+                    //改变平面图在google浏览器上面的样式问题
+                    $("#canvasPaintArea").css("position","absolute").css("width","94%");
+                    $(".buildingsFloor").css("width","98%");
+                    $(".floor-plan").css("width","90%");
+                    el.webkitRequestFullscreen();
+                }else if(el.msRequestFullscreen){
+                    el.msRequestFullscreen()
+                }
+            }
+        },
+        toggleFullScreen(e){
+            this.isFullscreen=!this.isFullscreen;
+            var el=e.srcElement||e.target;//target兼容Firefox
+            this.FullScreen(el);
+        },
+
+    }
 }
 </script>
  
@@ -34,6 +76,15 @@ export default {
             font-size: 32px;
             line-height: 75px;
         }
+        .header-fullscreen{
+            width: 60px;
+            height: 35px;
+            line-height: 35px;
+            position: absolute;
+            right: 148px;
+            top:16px;
+            cursor:pointer;
+        }
         .header-time{
             width: 128px;
             height: 35px;