perf[Screenfull]: refactor screenfull component

PanJiaChen · Feb 13, 2019 · 0fed69f · 0fed69f
1 parent a1d6ad3
commit 0fed69f
Show file tree

Hide file tree

Showing 8 changed files with 7 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     "mockjs": "1.0.1-beta3",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
-    "screenfull": "3.3.3",
+    "screenfull": "4.0.0",
     "showdown": "1.8.6",
     "sortablejs": "1.7.0",
     "tui-editor": "1.2.7",

diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <svg-icon class-name="screenfull-icon" icon-class="screenfull" @click="click" />
+    <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" />
   </div>
 </template>
 
@@ -23,7 +23,9 @@ export default {
         })
         return false
       }
-      screenfull.toggle()
+      screenfull.toggle().then(() => {
+        this.isFullscreen = screenfull.isFullscreen
+      })
     }
   }
 }

diff --git a/src/icons/svg/exit-fullscreen.svg b/src/icons/svg/exit-fullscreen.svg
diff --git a/src/icons/svg/screenfull.svg → src/icons/svg/fullscreen.svg b/src/icons/svg/screenfull.svg → src/icons/svg/fullscreen.svg
diff --git a/src/lang/en.js b/src/lang/en.js
@@ -69,7 +69,6 @@ export default {
     logOut: 'Log Out',
     dashboard: 'Dashboard',
     github: 'Github',
-    screenfull: 'Screenfull',
     theme: 'Theme',
     size: 'Global Size'
   },

diff --git a/src/lang/es.js b/src/lang/es.js
@@ -69,7 +69,6 @@ export default {
     logOut: 'Salir',
     dashboard: 'Panel de control',
     github: 'Github',
-    screenfull: 'Pantalla completa',
     theme: 'Tema',
     size: 'Tamaño global'
   },

diff --git a/src/lang/zh.js b/src/lang/zh.js
@@ -69,7 +69,6 @@ export default {
     logOut: '退出登录',
     dashboard: '首页',
     github: '项目地址',
-    screenfull: '全屏',
     theme: '换肤',
     size: '布局大小'
   },

diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
@@ -10,9 +10,7 @@
 
         <error-log class="errLog-container right-menu-item hover-effect"/>
 
-        <el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
-          <screenfull class="right-menu-item hover-effect"/>
-        </el-tooltip>
+        <screenfull class="right-menu-item hover-effect"/>
 
         <el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
           <size-select class="right-menu-item hover-effect"/>