app-full-scren.vue 2.5 KB
Newer Older
Shine-zwj's avatar
Shine-zwj committed
1 2
<template>
    <div class="fullscren">
3
        <Icon :type="fullScren == true ? 'ios-contract' : 'ios-expand'" color="#aaa" size="22" @click="handleScreen"/>
Shine-zwj's avatar
Shine-zwj committed
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89
    </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;
}
90 91 92 93 94 95
.ivu-icon-ios-expand{
    font-weight: bolder;
}
.ivu-icon-ios-contract{
    font-weight: bolder;
}
Shine-zwj's avatar
Shine-zwj committed
96
</style>