全屏/退出全屏

最新推荐文章于 2024-07-24 11:11:41 发布

@AfeiyuO

最新推荐文章于 2024-07-24 11:11:41 发布

阅读量88

点赞数

分类专栏： Vue+element-ui 文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/xfy991127/article/details/132725131

版权

Vue+element-ui 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<div class="btn-fullscreen" @click="handleFullScreen">
    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
       <i class="el-icon-rank"></i>
    </el-tooltip>
</div>

methods

        handleFullScreen() {
            let element = document.documentElement;
            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();
                }
            } else {
                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.fullscreen = !this.fullscreen;
        }