全屏展示部分DOM

最新推荐文章于 2024-04-28 08:02:36 发布

小刘auv

最新推荐文章于 2024-04-28 08:02:36 发布

阅读量156

点赞数

分类专栏：小记文章标签： javascript vue.js

本文链接：https://blog.csdn.net/xiaoliuauv/article/details/120724512

版权

小记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先说下逻辑

首先进入页面，Vue钩子函数页面加载完成后进行弹框；
弹框确认点击后调用方法进入获取DOM全屏。

Dom

<div class="bg" id="main></div>

Js方法

full(ele) {
    if (ele.requestFullscreen) {
        ele.requestFullscreen();
    } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
    } else if (ele.webkitRequestFullscreen) {
        ele.webkitRequestFullscreen();
    } else if (ele.msRequestFullscreen) {
        ele.msRequestFullscreen();
    }
}

调用

this.$nextTick(() => {
    this.$confirm({
        title: '为保证最佳体验，建议使用全屏页面！',
        content: h => <div style="color:red;">是全屏打开</div>,
        onOk() {
          sessionStorage.setItem('open', '1')
          let dom = document.getElementById('main')
          _this.full(dom)
        },
        onCancel() {
          console.log('Cancel');
        },
        class: 'test',
    });
})