Vue.js框架：单个div盒子（元素）放至全屏显示

一、页面元素

　　需要全屏展示的div或其他元素标签的id要设置，方便获取dom节点。

　　再添加一个可以触发点击事件的元素进行操作。

<div id="fullDom">
    <span @click="fullScreen">全屏显示</span>
</div>

二、脚本逻辑

　　1、预置一个用于控制是否全屏显示的字段

data() {
    return {
        //是否全屏显示，默认否
        fullBoolean: false,
    }
}

　　2、根据当前是否全屏展示的状态判断要进行的操作，如果当前未全屏则放至全屏，如果已全屏则退出全屏效果

fullScreen() {
    if(!this.fullBoolean){
        //如果未全屏，则开启全屏
        this.fullBoolean = true
        //获取需要全屏的元素
        let full = document.getElementById('fullDom')
        //开启全屏方法
        this.toFullscreen(full)
        //分辨率调整后，重新初始化方法
        this.init();
    }else{
        //如果已全屏，则退出全屏
        this.fullBoolean = false
        //退出全屏方法
        this.cancelFullscreen()
        //分辨率调整后，重新初始化方法
        this.init();
    }
},       

　　3、添加开启全屏方法

//全屏方法
toFullscreen(element) {
    //全屏
    if (element.requestFullscreen) {
        element.requestFullscreen()
    } 
    //兼容Firefox全屏
    else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
    } 
    //兼容Chrome Safari Opera全屏
    else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
    } 
    //兼容IE Edge全屏
    else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
    }
},

　　4、添加取消全屏方法

//退出全屏
cancelFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen()
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
    }
},

 

__EOF__

本文作者：我命倾尘
本文链接：https://www.cnblogs.com/guobin-/p/17210337.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！