no message

Former-commit-id: e45c6d141ba7d77bbbaf8fcb3c1f6d4cb5825cb6
Former-commit-id: 49ffbc6316bb9b8a66bd6d70bcf5c64140a4e956
Former-commit-id: 2e75b8eee35b140d290d5ef2ba442f7d91bd2275

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;

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;

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>

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
   }
 })

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()
+      }
+    }
+  }
+}