添加浏览器全屏功能

src/components/MonitorComponents/MonitorTitle/monitor-title.vue

@@ -6,6 +6,7 @@
       </DatePicker>
     </span> -->
     <div class="btn back" @click="closePage" />
+    <div class="btn full" @click="fullPage" />
     <div class="btn close" @click="closePage" />
     <span v-if="!hideTime" class="moment time">
       <!-- <span class="switch"><img src="@/assets/images/switch.png"/> 切换街道</span> -->
@@ -94,6 +95,32 @@ export default {
     closePage() {
       window.close()
     },
+    fullPage() {
+      if (!document.fullscreenElement) {
+        const element = document.documentElement
+        if (element.requestFullscreen) {
+          element.requestFullscreen()
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen()
+        } else if (element.msRequestFullscreen) {
+          element.msRequestFullscreen()
+        } else if (element.webkitRequestFullscreen) {
+          element.webkitRequestFullScreen()
+        }
+      } else {
+        if (document.exitFullscreen) {
+          document.exitFullscreen()
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen()
+        } else if (document.msExitFullscreen) {
+          document.msExiFullscreen()
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen()
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen()
+        }
+      }
+    }
   }
 }
 </script>
@@ -122,6 +149,11 @@ export default {
       background-image url(../../../assets/images/back.png)
       &:hover
         background-image url(../../../assets/images/back-on.png)
+    &.full
+      left .35rem
+      background-image url(../../../assets/images/full.png)
+      &:hover
+        background-image url(../../../assets/images/full-on.png)
     &.close
       right .1rem
       background-image url(../../../assets/images/close.png)