add screenfull

Author: PanJiaChen

package.json

@@ -25,6 +25,7 @@
     "mockjs": "1.0.1-beta3",
     "normalize.css": "3.0.2",
     "nprogress": "0.2.0",
+    "screenfull": "3.2.2",
     "showdown": "1.7.1",
     "simplemde": "1.11.2",
     "sortablejs": "1.5.1",

src/components/Screenfull/index.vue

@@ -0,0 +1,57 @@
+<template>
+
+<svg @click='click' class="icon screenfull" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1497503607356"  viewBox="0 0 1024 1024" version="1.1" p-id="4109" :fill='fill' :width="width" :height="height"><path d="M604.157933 512l204.484208 204.484208 82.942037-82.942037c10.364045-10.952446 26.498514-13.83817 40.309054-8.067746 13.249769 5.742794 22.465664 18.99154 22.465664 33.977859l0 258.042008c0 20.168342-16.695241 36.863582-36.863582 36.863582L659.452283 954.357873c-14.986319 0-28.236088-9.215896-33.977859-23.025413-5.770424-13.249769-2.885723-29.384237 8.067746-39.748283l82.942037-82.942037L512 604.157933 307.515792 808.642141l82.942037 82.942037c10.952446 10.364045 13.83817 26.498514 8.067746 39.748283-5.742794 13.809517-18.99154 23.025413-33.977859 23.025413L106.504686 954.357873c-20.168342 0-36.863582-16.695241-36.863582-36.863582L69.641103 659.452283c0-14.986319 9.215896-28.236088 23.025413-33.977859 13.249769-5.770424 29.384237-2.8847 39.748283 8.067746l82.942037 82.942037 204.484208-204.484208L215.357859 307.515792l-82.942037 82.942037c-6.890944 6.918573-16.10684 10.952446-25.911136 10.952446-4.593622 0-9.804297-1.14815-13.83817-2.8847-13.809517-5.742794-23.025413-18.99154-23.025413-33.977859L69.641103 106.504686c0-20.168342 16.695241-36.863582 36.863582-36.863582L364.546693 69.641103c14.986319 0 28.236088 9.215896 33.977859 23.025413 5.770424 13.249769 2.8847 29.384237-8.067746 39.748283l-82.942037 82.942037 204.484208 204.484208L716.484208 215.357859l-82.942037-82.942037c-10.952446-10.364045-13.83817-26.498514-8.067746-39.748283 5.742794-13.809517 18.99154-23.025413 33.977859-23.025413l258.042008 0c20.168342 0 36.863582 16.695241 36.863582 36.863582l0 258.042008c0 14.986319-9.215896 28.236088-22.465664 33.977859-4.593622 1.736551-9.804297 2.8847-14.397918 2.8847-9.804297 0-19.020192-4.033873-25.911136-10.952446l-82.942037-82.942037L604.157933 512z" p-id="4110"/></svg>
+</template>
+
+<script>
+    import screenfull from 'screenfull';
+    export default {
+      name: 'hamburger',
+      props: {
+        width: {
+          type: Number,
+          default: 22
+        },
+        height: {
+          type: Number,
+          default: 22
+        },
+        fill: {
+          type: String,
+          default: '#48576a'
+        }
+      },
+      data() {
+        return {
+          isFullscreen: false
+        }
+      },
+      methods: {
+        click() {
+          if (!screenfull.enabled) {
+            this.$message({
+              message: 'you browser can not work',
+              type: 'warning'
+            });
+            return false;
+          }
+
+          if (this.isFullscreen) {
+            screenfull.exit();
+            this.isFullscreen = false;
+          } else {
+            screenfull.request();
+            this.isFullscreen = true;
+          }
+        }
+      }
+    }
+</script>
+
+<style scoped>
+    .screenfull {
+        display: inline-block;
+        cursor: pointer;
+        vertical-align: -0.15em;
+    }
+</style>

src/views/layout/Navbar.vue

@@ -1,9 +1,9 @@
 <template>
     <el-menu class="navbar" mode="horizontal">
-        <Hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></Hamburger>
+        <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
         <levelbar></levelbar>
         <error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log>
-
+        <screenfull class='screenfull'></screenfull>
         <el-dropdown class="avatar-container" trigger="click">
             <div class="avatar-wrapper">
                 <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
@@ -30,14 +30,16 @@
     import { mapGetters } from 'vuex';
     import Levelbar from './Levelbar';
     import Hamburger from 'components/Hamburger';
+    import Screenfull from 'components/Screenfull';
     import ErrorLog from 'components/ErrLog';
     import errLogStore from 'store/errLog';
 
     export default {
       components: {
         Levelbar,
         Hamburger,
-        ErrorLog
+        ErrorLog,
+        Screenfull
       },
       data() {
         return {
@@ -80,6 +82,12 @@
             position: absolute;
             right: 150px;
         }
+        .screenfull{
+             position: absolute;
+             right: 90px;
+             top: 16px;
+             color: red;
+        }
         .avatar-container {
             height: 50px;
             display: inline-block;