vue点击使用全屏（记录备份一下）

<div class="quanp-txt" @click="screen">{{qpTxt}}</div>

data：

fullscreen:false,

qpTxt: '全屏',

method 里面：

screen(){

                // let element = document.documentElement;//设置后就是我们平时的整个页面全屏效果

                let element = document.getElementById('quanp');//设置后就是 id=* 的容器全屏

                if (this.fullscreen) {

                    // 如果已经全屏了就退出全屏

                    if (document.exitFullscreen) {

                            document.exitFullscreen();

                        }

                    else if (document.webkitCancelFullScreen) {

                            document.webkitCancelFullScreen();

                        } else if (document.mozCancelFullScreen) {

                            document.mozCancelFullScreen();

                        } else if (document.msExitFullscreen) {

                            document.msExitFullscreen();

                    }

                    this.qpTxt = '全屏'

                    this.fullscreen = false

                } else {

                    // 如果不是全屏就变成全屏

                    if(element){

                        if (element.requestFullscreen) {

                                element.requestFullscreen();

                        } else if (element.webkitRequestFullScreen) {

                                element.webkitRequestFullScreen();

                        } else if (element.mozRequestFullScreen) {

                                element.mozRequestFullScreen();

                        } else if (element.msRequestFullscreen) {

                            // IE11

                            element.msRequestFullscreen();

                        }

                        this.qpTxt = '退出全屏'

                        this.fullscreen = true;

                    }

                }

        },

使用全屏遇到的问题：项目使用的是vue+element  导致dialog失效

修改为div自己写一个样式即可：

tanchuang{

        position: fixed;

        top: 30%;

        left: 20%;

        width: 60%;

        height: auto;

        padding: 1.2% 3%;

        background: rgba(6,69,115,0.68);

        box-shadow: 4px 0px 16px 0px rgba(22,26,52,0.89);

        color: #fff;

    }

全屏时滚动条失效，解决方案给内部内容块增加滚动条 设置样式为透明：

.gdt{

        height: 70vh;

        overflow-y: scroll;

        overflow-x: hidden;

    }

    .gdt::-webkit-scrollbar{

        width:0px;

        height:auto;

        background-color: rgba(255, 255, 255, 0);

        border-radius: 4px;

    }

    .gdt::-webkit-scrollbar-track{

        background: rgba(255, 255, 255, 0);

        border-radius:4px;

    }

    .gdt::-webkit-scrollbar-thumb{

        background: rgba(255, 255, 255, 0);

        border-radius:4px;

    }

    .gdt::-webkit-scrollbar-thumb:hover{

        background: rgba(255, 255, 255, 0);

    }

    .gdt::-webkit-scrollbar-corner{

        background: rgba(255, 255, 255, 0);

    }

全屏时el-select下拉失效，解决：

<el-select

                                filterable

                                v-model="queryParams.deptId"

                                placeholder="请选择"

                                :popper-append-to-body="false" //增加这一个即可解决

                                >

全屏时检测键盘esc退出及点击顶部叉号退出全屏：

methods中写判断是否全屏的方法：

checkFull(){

            //判断浏览器是否处于全屏状态 （需要考虑兼容问题）

            //火狐浏览器

            var isFull = document.mozFullScreen||

            document.fullScreen ||

            //谷歌浏览器及Webkit内核浏览器

            document.webkitIsFullScreen ||

            document.webkitRequestFullScreen ||

            document.mozRequestFullScreen ||

            document.msFullscreenEnabled

            if(isFull === undefined) {

                isFull = false

            }

            return isFull;

   

        },

在监听：

updated() {

        // 作用域this===获取vue的实例

        const that = this

        window.addEventListener('resize', function () {

        //如果直接在这里面使用this关键字，==结果是使用window这个对象

            // debugger

            if (!that.checkFull()) {

                // 全屏下按键esc后要执行的动作

                // isclick 为true 此时为全屏状态  false 为非全屏状态

                if(!that.checkFull()) {

                    that.qpTxt = '全屏'

                    that.fullscreen = false

                }

            }

        });

    },

以上就是自己在做点击全屏时所遇到的问题以及解决方法，记录一下~