bug fixed

Former-commit-id: 7626eb8f432dd7a5329d39b794369d623cd34095

package.json

@@ -20,6 +20,7 @@
     "lodash.uniqueid": "^4.0.1",
     "lowdb": "^1.0.0",
     "particles.js": "^2.0.0",
+    "screenfull": "^3.3.2",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1"

src/libs/util.js

@@ -25,37 +25,6 @@ util.title = function (title) {
   window.document.title = `${prefix}${title ? ` | ${title}` : ''}`
 }
 
-/**
- * @description 打开全屏
- */
-util.openFullScreen = function () {
-  const body = document.body
-  if (body.requestFullscreen) {
-    body.requestFullscreen()
-  } else if (body.mozRequestFullScreen) {
-    body.mozRequestFullScreen()
-  } else if (body.webkitRequestFullScreen) {
-    body.webkitRequestFullScreen()
-  } else if (body.msRequestFullscreen) {
-    body.msRequestFullscreen()
-  }
-}
-
-/**
- * @description 关闭全屏
- */
-util.exitFullScreen = function () {
-  if (document.exitFullscreen) {
-    document.exitFullscreen()
-  } else if (document.mozCancelFullScreen) {
-    document.mozCancelFullScreen()
-  } else if (document.webkitCancelFullScreen) {
-    document.webkitCancelFullScreen()
-  } else if (document.msExitFullscreen) {
-    document.msExitFullscreen()
-  }
-}
-
 /**
  * @description 在每次打开新页面的时候调用 打开一个新的 tab
  * @param {object} vm vue

src/main.js

@@ -23,6 +23,9 @@ import 'element-ui/lib/theme-chalk/index.css'
 // font-awesome
 import '@/assets/library/font-awesome-4.7.0/css/font-awesome.min.css'
 
+// 全屏控制
+import screenfull from 'screenfull'
+
 // 全局注册的组件
 import '@/components'
 
@@ -62,6 +65,14 @@ new Vue({
     this.$store.commit('d2adminPageOpenedListLoad')
     // D2Admin 开发环境检查更新
     util.checkUpdate(this)
+    // 检测退出全屏
+    if (screenfull.enabled) {
+      screenfull.on('change', () => {
+        if (!screenfull.isFullscreen) {
+          this.$store.commit('d2adminFullScreenSet', false)
+        }
+      })
+    }
     // 完整版
     console.log('D2Admin 完整版项目地址：https://github.com/d2-projects/d2-admin')
   },

src/store/modules/d2admin.js

@@ -1,3 +1,4 @@
+import screenfull from 'screenfull'
 import util from '@/libs/util.js'
 import db from '@/libs/db.js'
 import themeList from '@/assets/style/theme/list.js'
@@ -331,15 +332,23 @@ export default {
      * @description 切换全屏
      * @param {state} state vuex state
      */
-    d2adminFullScreenToggle (state) {
+    d2adminFullScreenToggle () {
-      if (state.isFullScreen) {
+      if (screenfull.isFullscreen) {
-        util.exitFullScreen()
+        screenfull.exit()
-        state.isFullScreen = false
+        this.commit('d2adminFullScreenSet', false)
       } else {
-        util.openFullScreen()
+        screenfull.request()
-        state.isFullScreen = true
+        this.commit('d2adminFullScreenSet', true)
       }
     },
+    /**
+     * @class isFullScreen
+     * @description 设置 store 里的全屏状态
+     * @param {state} state vuex state
+     */
+    d2adminFullScreenSet (state, isFullScreen) {
+      state.isFullScreen = isFullScreen
+    },
     /**
      * @class isGrayMode
      * @description 切换灰度状态