add: fullscreen

components/Navbar.vue

@@ -21,7 +21,9 @@
       :style="linksWrapMaxWidth ? {
         'max-width': linksWrapMaxWidth + 'px'
       } : {}">
+
       <Theme v-if="hasThemes" />
+      <ScreenFull />
       <AlgoliaSearchBox
         v-if="isAlgoliaSearch"
         :options="algolia"/>
@@ -37,9 +39,10 @@ import SearchBox from '@SearchBox'
 import SidebarButton from '@theme/components/SidebarButton.vue'
 import NavLinks from '@theme/components/NavLinks.vue'
 import Theme from '@theme/components/Theme'
+import ScreenFull from '@theme/components/ScreenFull'
 
 export default {
-  components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox, Theme },
+  components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox, Theme, ScreenFull },
 
   data () {
     return {

components/ScreenFull.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="fullscreen-wrapper">
+    <i class="iconfont reco-fullscreen" @click="click"></i>
+  </div>
+</template>
+
+<script>
+import screenfull from 'screenfull'
+export default {
+  name: 'Screenfull',
+  data() {
+    return {
+      isFullscreen: false
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    this.destroy()
+  },
+  methods: {
+    click() {
+      if (!screenfull.enabled) {
+        this.$message({
+          message: 'you browser can not work',
+          type: 'warning'
+        })
+        return false
+      }
+      screenfull.toggle()
+    },
+    change() {
+      this.isFullscreen = screenfull.isFullscreen
+    },
+    init() {
+      if (screenfull.enabled) {
+        screenfull.on('change', this.change)
+      }
+    },
+    destroy() {
+      if (screenfull.enabled) {
+        screenfull.off('change', this.change)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.fullscreen-wrapper {
+  margin-right: 1em;
+  .iconfont {
+    font-size 1.4rem
+    color: $accentColor
+  }
+}
+</style>

package.json

@@ -27,6 +27,7 @@
     "leancloud-storage": "3.13.2",
     "valine": "1.3.6",
     "@vuepress/plugin-blog": "1.0.0-alpha.49",
-    "vue-click-outside": "1.0.7"
+    "vue-click-outside": "1.0.7",
+    "screenfull": "4.2.1"
   }
 }