fullscreen

Former-commit-id: 37e93d840946bb320ff6b6ecf88a18e21216f168 [formerly 37e93d840946bb320ff6b6ecf88a18e21216f168 [formerly 37e93d840946bb320ff6b6ecf88a18e21216f168 [formerly 37e93d840946bb320ff6b6ecf88a18e21216f168 [formerly 8a55fc34a0762b6085009ecf444fe4f578918ea8 [formerly 4e0ac1b47f813702e20637a103312cb6e8f773d1]]]]]
Former-commit-id: 09fe0461aa2e56198e14067a8e9a576417e72f88
Former-commit-id: 93163183f4083aaefacd3f07ce750d538d0ead74
Former-commit-id: 7b26df4734e261490f7f58dee36dd8b8779451d0 [formerly 170829cb9ee32327b5f0103fb0ca07dc88c92562]
Former-commit-id: 6ab804290cf0c72be97e18279945c50faf59c70d
Former-commit-id: e55fcc77b2cb36648171346e3d47a223b6e6327d
Former-commit-id: 787c3e7b913fb9bb0f15b688415adc88c39dedf1
Former-commit-id: 2165f9da4232880cb55dc93ddac509bae9a8b99a
Former-commit-id: 9603c4f33082229ab1727138e82c6c939eccb824

src/layout/header-aside/components/header-fullscreen/index.vue

@@ -1,10 +1,10 @@
 <template>
   <el-tooltip
     effect="dark"
-    :content="isFullScreen ? '退出全屏' : '全屏'"
+    :content="active ? '退出全屏' : '全屏'"
     placement="bottom">
-    <el-button class="d2-mr btn-text can-hover" type="text" @click="fullScreenToggle">
-      <d2-icon v-if="isFullScreen" name="compress"/>
+    <el-button class="d2-mr btn-text can-hover" type="text" @click="toggle">
+      <d2-icon v-if="active" name="compress"/>
       <d2-icon v-else name="arrows-alt" style="font-size: 16px"/>
     </el-button>
   </el-tooltip>
@@ -14,13 +14,13 @@
 import { mapState, mapMutations } from 'vuex'
 export default {
   computed: {
-    ...mapState('d2admin', [
-      'isFullScreen'
+    ...mapState('d2admin/fullscreen', [
+      'active'
     ])
   },
   methods: {
-    ...mapMutations('d2admin', [
-      'fullScreenToggle'
+    ...mapMutations('d2admin/fullscreen', [
+      'toggle'
     ])
   }
 }

src/main.js

@@ -81,7 +81,7 @@ new Vue({
       if (screenfull.enabled) {
         screenfull.on('change', () => {
           if (!screenfull.isFullscreen) {
-            this.$store.commit('d2admin/fullScreenSet', false)
+            this.$store.commit('d2admin/fullscreen/set', false)
           }
         })
       }

src/pages/demo/playground/store/fullscreen/index.vue

@@ -1,23 +1,18 @@
 <template>
   <d2-container type="card" class="page-demo-playground-fullscreen">
     <template slot="header">全屏</template>
-    <el-button type="primary" @click="fullScreenToggle">
-      fullScreenToggle 切换全屏
+    <el-button type="primary" @click="toggle">
+      toggle 切换全屏
     </el-button>
   </d2-container>
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapMutations } from 'vuex'
 export default {
-  computed: {
-    ...mapState('d2admin', [
-      'isFullScreen'
-    ])
-  },
   methods: {
-    ...mapMutations('d2admin', [
-      'fullScreenToggle'
+    ...mapMutations('d2admin/fullscreen', [
+      'toggle'
     ])
   }
 }

src/pages/demo/playground/store/sys/index.vue

@@ -30,7 +30,7 @@
         <el-col :span="8">
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">全屏模式</template>
-            <el-switch v-model="isFullScreen" active-text="打开" inactive-text="关闭" disabled/>
+            <el-switch v-model="fullscreenActive" active-text="打开" inactive-text="关闭" disabled/>
           </el-card>
         </el-col>
         <el-col :span="8">
@@ -145,10 +145,11 @@ export default {
       menuAsideCollapse: state => state.menu.asideCollapse,
       // 主题
       themeList: state => state.theme.list,
-      themeActiveName: state => state.theme.activeName
+      themeActiveName: state => state.theme.activeName,
+      // 全屏
+      fullscreenActive: state => state.fullscreen.active
     }),
     ...mapState('d2admin', [
-      'isFullScreen',
       'isGrayMode',
       'pagePool',
       'pageOpenedList',

src/store/modules/d2admin/index.js.REMOVED.git-id

@@ -1 +1 @@
-4ece1c4e7a74f137bfa094cbb973d62c91bde205
+4d21835fa9e3352a4c11053634775c7e45774fae

src/store/modules/d2admin/modules/fullscreen.js

@@ -0,0 +1,31 @@
+import screenfull from 'screenfull'
+
+export default {
+  namespaced: true,
+  state: {
+    // 全屏激活
+    active: false
+  },
+  mutations: {
+    /**
+     * @description 切换全屏
+     */
+    toggle () {
+      if (screenfull.isFullscreen) {
+        screenfull.exit()
+        this.commit('d2admin/fullscreen/set', false)
+      } else {
+        screenfull.request()
+        this.commit('d2admin/fullscreen/set', true)
+      }
+    },
+    /**
+     * @description 设置 store 里的全屏状态
+     * @param {Object} state vuex state
+     * @param {Boolean} active active
+     */
+    set (state, active) {
+      state.active = active
+    }
+  }
+}