添加浏览器全屏功能

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" />
     <div class="slogan left">
       <span v-for="(word, i) in slogan[0]" :key="i+word">{{word}}</span>
@@ -106,6 +107,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()
+        }
+      }
+    }
     // getWeather() {
     //   axios.get('https://tianqiapi.com/api?version=v6&appid=27325769&appsecret=k2G7Q7bA&city=杨浦&vue=1'
     //   ).then(res => {
@@ -142,6 +169,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)
@@ -179,7 +211,7 @@ export default {
     z-index 9
     position absolute
     top .07rem
-    left 3%
+    left 6%
   .duty
     display flex
     align-items center