add 全屏功能

Andy
1 parent f58839aa
Showing 2 changed files with 41 additions and 1 deletions
src/assets/img/righttopbarico_Bg.png
src/components/headerCommon.vue
 <template>
   <div class="headercommon">
     <h3>丹阳停车运营监控中心</h3>
+    <div class="header-fullscreen" @click="handleFullScreen"></div>
     <div class="time-wrap">
       <p>{{timedate}}</p>
       <p>{{time}}</p>
@@ -17,8 +18,37 @@ export default {
   data() {
     return {
       timedate: getNowFormatDate(),
-      time: getNowFormatTime()
+      time: getNowFormatTime(),
+      fullscreen: false
     }
+  },
+  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>
@@ -42,6 +72,16 @@ export default {
     font-weight:800;
     color:rgba(255,255,255,1);
   }
+  .header-fullscreen{
+    width: 18px;
+    height: 18px;
+    line-height: 18px;
+    position: absolute;
+    right: 150px;
+    top:30px;
+    cursor:pointer;
+    background: url('../assets/img/righttopbarico_Bg.png');
+  }
   .time-wrap{
     position: absolute;
     right: 12px;