Js Vue全屏切換顯示 指定div切換全屏顯示

效果

我這里是用jq 寫的，我這里寫的是點擊按鈕切換展示。

 <div @click="handleFullScreen" class="full-screen">
                        <img v-if="!fullScreen" src="${mvcPath}/dacp-res/images/full_screen.png"/>
                        <img v-if="fullScreen" src="${mvcPath}/dacp-res/images/full_screen_restore.png"/>
                    </div>

js 我在Vue methods中寫的

  handleFullScreen:function(){
                this.fullScreen = !this.fullScreen;
                if (this.fullScreen) {
                    // this.postFullScreen();
                    launchFullScreen(document.getElementById("iframeTest")); // 單獨元素顯示全屏
                    return false;
                } else {
                    exitFullscreen(document.getElementById("iframeTest"))
              
                }

            },

// js 中定義的
    //判斷各種瀏覽器 -全屏
    function launchFullScreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
        else {
            wtx.info("當前瀏覽器不支持部分全屏！");
        }
    }
    //判斷各種瀏覽器 -退出全屏
    function exitFullscreen(element) {
        console.log('exitFullscreen',element)
        if(document.exitFullscreen) {
            document.exitFullscreen();
        } else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if(document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if(document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }

當然vue 里面有插件，更簡單了，我這里是自己沒事自己玩寫的一個dom