Js Vue全屏切换显示 指定div切换全屏显示

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