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()
    }
},