全屏

kuangshp · kuangshp · commit 668fd61b7899 · 2020-06-01T16:28:21.000+08:00
diff --git a/src/layout/breadcrumb/Index.vue b/src/layout/breadcrumb/Index.vue
@@ -24,9 +24,9 @@ export default {
         ? matched
         : [
           {
-            name: 'home',
+            name: '首页',
             path: '/home',
-            meta: { title: 'Home' },
+            meta: { title: '首页' },
           },
         ].concat(matched);
     }
diff --git a/src/layout/header/Index.vue b/src/layout/header/Index.vue
@@ -31,6 +31,19 @@
       <breadcrumb />
     </div>
     <div class="userinfo-submenu">
+      <!-- 全屏显示 -->
+      <div
+        class="btn-fullscreen"
+        @click="handleFullScreen"
+      >
+        <el-tooltip
+          effect="dark"
+          :content="fullscreen?`取消全屏`:`全屏`"
+          placement="bottom"
+        >
+          <i class="el-icon-rank"></i>
+        </el-tooltip>
+      </div>
       <el-dropdown>
         <span class="el-dropdown-link">
           <span>{{username}}</span>
@@ -58,6 +71,7 @@ export default {
   data () {
     return {
       username: '',
+      fullscreen: false,
     }
   },
   methods: {
@@ -66,6 +80,33 @@ export default {
       storage.removeItem(currentUser);
       this.$router.push({ name: 'login' });
     },
+    // 全屏事件
+    handleFullScreen () {
+      let element = document.documentElement;
+      if (this.fullscreen) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      } else {
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.webkitRequestFullScreen) {
+          element.webkitRequestFullScreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.msRequestFullscreen) {
+          // IE11
+          element.msRequestFullscreen();
+        }
+      }
+      this.fullscreen = !this.fullscreen;
+    },
     ...mapActions(['toggleSidebar'])
   },
   computed: {
@@ -74,7 +115,6 @@ export default {
     })
   },
   mounted () {
-    console.log(this.sidebarOpened, '==')
     this.username = storage.getItem(currentUser);
   },
   components: {
@@ -142,8 +182,17 @@ export default {
     height: inherit;
     text-align: right;
     margin-right: 2rem;
+    display: flex;
+    flex-direction: row;
+    .btn-fullscreen {
+      transform: rotate(45deg);
+      margin-right: 5px;
+      font-size: 24px;
+      cursor: pointer;
+    }
     .el-dropdown {
       color: #fff;
+      flex: 1;
     }
   }
 }
diff --git a/src/views/shared/login/index.vue b/src/views/shared/login/index.vue
@@ -46,6 +46,8 @@
 </template>
 
 <script>
+import { currentUser } from '@/config';
+import { storage } from '@/utils';
 export default {
   data: function () {
     return {
@@ -65,7 +67,7 @@ export default {
       this.$refs.login.validate(valid => {
         if (valid) {
           this.$message.success('登录成功');
-          localStorage.setItem('ms_username', this.param.username);
+          storage.setItem(currentUser, this.param.username);
           this.$router.push('/');
         } else {
           this.$message.error('请输入账号和密码');

Original file line number	Diff line number	Diff line change
`@@ -24,9 +24,9 @@ export default {`
`24`	`24`	`? matched`
`25`	`25`	`: [`
`26`	`26`	`{`
`27`		`- name: 'home',`
	`27`	`+ name: '首页',`
`28`	`28`	`path: '/home',`
`29`		`- meta: { title: 'Home' },`
	`29`	`+ meta: { title: '首页' },`
`30`	`30`	`},`
`31`	`31`	`].concat(matched);`
`32`	`32`	`}`