vue全屏显示

最新推荐文章于 2024-05-09 21:25:39 发布

至_臻

最新推荐文章于 2024-05-09 21:25:39 发布

阅读量153

点赞数 1

分类专栏： vue 前端文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_57163112/article/details/128905423

版权

前端同时被 2 个专栏收录

50 篇文章 2 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <style>
        .main {
            width: 300px;
            height: 300px;
            background-color: rgb(79, 108, 36);
            border: 10px solid blue;
            color: #fff;
        }

    </style>
    <body>
        <div>
            <div class="main" id="mainId" @click="change">
                显示全屏
            </div>
        </div>
    </body>
    <script>
        const vm = new Vue({
            el: '#mainId',
            methods: {
                change() {
                    let dom = document.getElementById('mainId');
                    this.toggle(dom);
                    console.log(dom);
                },
                // 进入全屏方法
                enterFullscreen(docElm) {
                    // W3C
                    if (docElm.requestFullscreen) {
                        docElm.requestFullscreen(// 火狐
                        );
                    } else if (docElm.mozRequestFullScreen) {
                        docElm.mozRequestFullScreen(// 谷歌
                        );
                    } else if (docElm.webkitRequestFullScreen) {
                        docElm.webkitRequestFullScreen(// IE
                        );
                    } else if (docElm.msRequestFullscreen) {
                        docElm.msRequestFullscreen();
                    }
                },
                // 退出全屏方法
                exitFullscreen() {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                },
                // 判断当前页面是否全屏
                getFullScreenStatus() {
                    return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen;
                },
                // 全屏切换
                toggle(docElm) {
                    if (!this.getFullScreenStatus()) {
                        // 全屏
                        this.enterFullscreen(docElm);
                    } else {
                        // 取消全屏
                        this.exitFullscreen();
                    }
                }
            }
        })
    </script>
</html>