全屏

src/app-register.ts

@@ -81,6 +81,7 @@ import AppDepartmentSelect from './components/app-department-select/app-departme
 import AppGroupSelect from './components/app-group-select/app-group-select.vue'
 import UpdatePwd from './components/app-update-password/app-update-password.vue'
 import AppMenuItem from './components/app-menu-item/app-menu-item.vue'
+import AppFullScren from './components/app-full-scren/app-full-scren.vue'
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -105,6 +106,7 @@ export const AppComponents = {
         v.prototype.$verify = Verify;
         v.prototype.$viewTool = ViewTool;
         v.prototype.$uiActionTool = UIActionTool;
+        v.component('app-full-scren',AppFullScren);
         v.component('input-box', InputBox);
         v.component('app-keep-alive',AppKeepAlive);
         v.component('tab-page-exp',TabPageExp);

src/components/app-full-scren/app-full-scren.vue

+<template>
+    <div class="fullscren">
+        <Icon :type="fullScren == true ? 'ios-contract' : 'ios-expand'" size="20" @click="handleScreen"/>
+    </div>
+</template>
+<script lang = 'ts'>
+import { Vue, Component, Prop, Model, Watch } from 'vue-property-decorator';
+
+@Component({})
+export default class AppFullScren extends Vue{
+
+    public fullScren: boolean = false;
+
+    public handleScreen(){
+        if(this.fullscreenEnable()){
+            this.exitFullScreen();
+        }else{
+            this.reqFullScreen();
+        }
+    }
+
+    /**
+     * 监控全屏状态和键盘
+     */
+    public created(){
+        let _this = this;
+        window.onresize = function(){
+            if(_this.fullscreenEnable()){
+                _this.fullScren = true;
+            }else{
+                _this.fullScren = false;
+            }
+        };
+        window.addEventListener("keydown", this.keyDown, true);
+    }
+
+    /**
+     * 监控F11
+     */
+    public keyDown($event: any){
+        if ($event.keyCode == 122) {
+            $event.returnValue = false;
+            this.fullScren = !this.fullScren;
+            this.handleScreen();
+        }
+    }
+
+    /**
+     * 浏览器判断是否全屏
+     */
+    public fullscreenEnable(){
+        const isFullscreen = (document as any).isFullScreen || (document as any).mozIsFullScreen || (document as any).webkitIsFullScreen;
+        return isFullscreen;
+    }
+
+    /**
+     * 浏览器全屏
+     */
+    public reqFullScreen(){
+        if ((document as any).documentElement.requestFullScreen) {
+            (document as any).documentElement.requestFullScreen();
+        } else if ((document as any).documentElement.webkitRequestFullScreen) {
+            (document as any).documentElement.webkitRequestFullScreen();
+        } else if ((document as any).documentElement.mozRequestFullScreen) {
+            (document as any).documentElement.mozRequestFullScreen();
+        }
+    };
+
+    /**
+     * 浏览器退出全屏
+     */
+    public exitFullScreen(){
+        if ((document as any).documentElement.requestFullScreen) {
+            (document as any).exitFullScreen();
+        } else if ((document as any).documentElement.webkitRequestFullScreen) {
+            (document as any).webkitCancelFullScreen();
+        } else if ((document as any).documentElement.mozRequestFullScreen) {
+            (document as any).mozCancelFullScreen();
+        }
+    }
+
+}
+
+</script>
+<style lang='less'>
+.fullscren{
+    cursor:pointer;
+    padding: 0 5px;
+}
+</style>
\ No newline at end of file