From 867da8ed43e94a9a310919f7d8f4ef3ea12912cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com>
Date: Thu, 8 Mar 2018 21:48:41 +0800
Subject: [PATCH] no message

Former-commit-id: e45c6d141ba7d77bbbaf8fcb3c1f6d4cb5825cb6
Former-commit-id: 49ffbc6316bb9b8a66bd6d70bcf5c64140a4e956
Former-commit-id: 2e75b8eee35b140d290d5ef2ba442f7d91bd2275
---
 src/assets/style/fixed/base.scss         |  1 -
 src/assets/style/theme/default.scss      |  5 +--
 src/components/core/MainLayout/index.vue |  7 +++++
 src/store/index.js                       |  4 ++-
 src/store/modules/fullScreen.js          | 40 ++++++++++++++++++++++++
 5 files changed, 53 insertions(+), 4 deletions(-)
 create mode 100644 src/store/modules/fullScreen.js

diff --git a/src/assets/style/fixed/base.scss b/src/assets/style/fixed/base.scss
index 5dae487d..7029db9f 100644
--- a/src/assets/style/fixed/base.scss
+++ b/src/assets/style/fixed/base.scss
@@ -3,7 +3,6 @@
 html, body {
   margin: 0px;
   height: 100%;
-  background-color: $color-bg;
   font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
   #app {
     position: absolute;
diff --git a/src/assets/style/theme/default.scss b/src/assets/style/theme/default.scss
index 0ba35df5..984a6d90 100644
--- a/src/assets/style/theme/default.scss
+++ b/src/assets/style/theme/default.scss
@@ -5,6 +5,9 @@ $color: #409EFF;
 // 默认主题
 .layout-main {
   &.default {
+    height: 100vh;
+    width: 100vw;
+    background-color: $color-bg;
     // [全局设置]
     // 关闭所有卡片的阴影
     .el-card {
@@ -13,8 +16,6 @@ $color: #409EFF;
         box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
       }
     }
-    height: 100vh;
-    width: 100vw;
     // [布局]
     .el-header {
       padding: 0px;
diff --git a/src/components/core/MainLayout/index.vue b/src/components/core/MainLayout/index.vue
index d629a936..e318c84e 100644
--- a/src/components/core/MainLayout/index.vue
+++ b/src/components/core/MainLayout/index.vue
@@ -5,6 +5,7 @@
         <img src="@/assets/image/logo/header.png">
       </div>
       <HeaderMenu></HeaderMenu>
+      <span @click="toggleFullScreen">全屏</span>
     </el-header>
     <el-container>
       <el-aside style="width: 200px;">
@@ -18,6 +19,7 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex'
 import SiderMenu from '@/components/core/MainLayout/_siderMenu.vue'
 import HeaderMenu from '@/components/core/MainLayout/_headerMenu.vue'
 export default {
@@ -29,6 +31,11 @@ export default {
     return {
       theme: 'default'
     }
+  },
+  methods: {
+    ...mapMutations([
+      'toggleFullScreen'
+    ])
   }
 }
 </script>
diff --git a/src/store/index.js b/src/store/index.js
index 49ce77e9..9bef11d3 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,11 +2,13 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import menu from './modules/menu'
+import fullScreen from './modules/fullScreen'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
-    menu
+    menu,
+    fullScreen
   }
 })
diff --git a/src/store/modules/fullScreen.js b/src/store/modules/fullScreen.js
new file mode 100644
index 00000000..7fa7ddda
--- /dev/null
+++ b/src/store/modules/fullScreen.js
@@ -0,0 +1,40 @@
+export default {
+  state: {
+    isFullScreen: false
+  },
+  mutations: {
+    toggleFullScreen (state) {
+      const d = document
+      const body = d.body
+      const closeFullScreen = () => {
+        if (d.exitFullscreen) {
+          d.exitFullscreen()
+        } else if (d.mozCancelFullScreen) {
+          d.mozCancelFullScreen()
+        } else if (d.webkitCancelFullScreen) {
+          d.webkitCancelFullScreen()
+        } else if (d.msExitFullscreen) {
+          d.msExitFullscreen()
+        }
+        state.isFullScreen = false
+      }
+      const fullScreen = () => {
+        if (body.requestFullscreen) {
+          body.requestFullscreen()
+        } else if (body.mozRequestFullScreen) {
+          body.mozRequestFullScreen()
+        } else if (body.webkitRequestFullScreen) {
+          body.webkitRequestFullScreen()
+        } else if (body.msRequestFullscreen) {
+          body.msRequestFullscreen()
+        }
+        state.isFullScreen = true
+      }
+      if (state.isFullScreen) {
+        closeFullScreen()
+      } else {
+        fullScreen()
+      }
+    }
+  }
+}