全屏幕

liuqimichale
1 parent d84ee05e
Showing 1 changed file with 31 additions and 40 deletions
src/components/VHeader.vue
 <template>
     <header class="header-wrap">
         <span>车场实时概况</span>
-        <div class="header-fullscreen" @click="toggleFullScreen($event)">全屏</div>
+        <div class="header-fullscreen" @click="handleFullScreen">全屏</div>
         <div class="header-time">
             <p>{{headerDay}}</p>
             <p>{{headerTime}}</p>
@@ -19,49 +19,40 @@ export default {
     return {
       headerDay: formateday(),
       headerTime: formateTime(),
-      isFullscreen:true
+
+      fullscreen: false
     }
   },
-    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);
-        },
+    methods: {
+      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;
+      },
  
     }
+
 }
 </script>