chenrui 3 år sedan
förälder
incheckning
f290ef5693
3 ändrade filer med 19 tillägg och 2 borttagningar
  1. 5 0
      package-lock.json
  2. 1 0
      package.json
  3. 13 2
      src/components/tools/UserMenu.vue

+ 5 - 0
package-lock.json

@@ -14524,6 +14524,11 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "screenfull": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.1.0.tgz",
+      "integrity": "sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA=="
+    },
     "select": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",

+ 1 - 0
package.json

@@ -25,6 +25,7 @@
     "mockjs2": "1.0.7",
     "moment": "^2.24.0",
     "nprogress": "^0.2.0",
+    "screenfull": "^5.1.0",
     "v-runtime-template": "^1.10.0",
     "v-viewer": "^1.6.4",
     "viser-vue": "^2.4.6",

+ 13 - 2
src/components/tools/UserMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="user-wrapper">
     <div class="content-box">
-		<notice-icon class="action"/>
+      <notice-icon class="action"/>
       <!-- <a href="https://pro.loacg.com/docs/getting-started" target="_blank">
         <span class="action">
           <a-icon type="question-circle-o"></a-icon>
@@ -41,11 +41,13 @@
           </a-menu-item>
         </a-menu>
       </a-dropdown>
+      <a-icon type="fullscreen" title="全屏" :style="{ fontSize: '20px', color: '#08c', marginLeft: '5px' }" @click="screen" />
     </div>
   </div>
 </template>
 
 <script>
+import screenfull from 'screenfull'
 import NoticeIcon from '@/components/NoticeIcon'
 import { mapActions, mapGetters } from 'vuex'
 import defaultAvatar from '@/assets/avatar2.jpg'
@@ -59,7 +61,8 @@ export default {
   },
   data () {
     return {
-      defaultAvatar: defaultAvatar
+      defaultAvatar: defaultAvatar,
+      isFullscreen: false
     }
   },
   methods: {
@@ -85,6 +88,14 @@ export default {
         onCancel () {
         }
       })
+    },
+    screen () {
+      // 如果不允许进入全屏,发出不允许提示
+      if (!screenfull.isEnabled) {
+        this.$message.info('您的浏览器不能全屏')
+        return false
+      }
+      screenfull.toggle()
     }
   }
 }