js-全屏显示

今儿遇到个需求，需要使用JavaScript来实现全屏显示的功能，因此记录一下。

首先js部分如下：

<script>

    export default{
        name:'demo',
        data(){
            return{}
        },
        methods:{
            function FullScreen(el) {
                let isFullscreen = document.fullScreen || document.mozFullScreen ||       document.webkitIsFullScreen;
                if (!isFullscreen) { //进入全屏,多重短路表达式
                    (el.requestFullscreen && el.requestFullscreen()) ||
                    (el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
                    (el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||     (el.msRequestFullscreen && el.msRequestFullscreen());} 
                else { //退出全屏,此处使用了三目运算符
                    document.exitFullscreen ? document.exitFullscreen() :
                    document.mozCancelFullScreen ? document.mozCancelFullScreen() :
                    document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
                }
            },

            function toFullScreen(e) {
                let el = e.srcElement || e.target; //注意：target兼容Firefox
                el.innerHTML == '' ? el.innerHTML = '退出' : el.innerHTML = '';
                FullScreen(el);
            }
        }
    }

</script>

接着在html中引用即可

<template>
    <div class="demo">
        <button onclick="toFullScreen(event)"></button>
    </div>
</template>