diff --git a/package.json b/package.json index 4988ef4..28cda28 100755 --- a/package.json +++ b/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" diff --git a/src/libs/util.js b/src/libs/util.js index 959ed88..867e6bb 100644 --- a/src/libs/util.js +++ b/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 diff --git a/src/main.js b/src/main.js index 229650d..3ce3a64 100755 --- a/src/main.js +++ b/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') }, diff --git a/src/store/modules/d2admin.js b/src/store/modules/d2admin.js index 151df84..0c08503 100644 --- a/src/store/modules/d2admin.js +++ b/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) { - if (state.isFullScreen) { - util.exitFullScreen() - state.isFullScreen = false + d2adminFullScreenToggle () { + if (screenfull.isFullscreen) { + screenfull.exit() + this.commit('d2adminFullScreenSet', false) } else { - util.openFullScreen() - state.isFullScreen = true + screenfull.request() + this.commit('d2adminFullScreenSet', true) } }, + /** + * @class isFullScreen + * @description 设置 store 里的全屏状态 + * @param {state} state vuex state + */ + d2adminFullScreenSet (state, isFullScreen) { + state.isFullScreen = isFullScreen + }, /** * @class isGrayMode * @description 切换灰度状态