vue 全屏代码

chalmers_15

已于 2024-07-29 14:23:30 修改

阅读量260

点赞数 2

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

于 2024-07-29 14:18:10 首次发布

本文链接：https://blog.csdn.net/myy2012/article/details/140770080

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.生成入口

<template>
    <div class="right-menu">
       <a title="全屏" @click="toggleFullScreen">全屏</a>
    </div>
</template>

2.click回调

        toggleFullScreen() {
            if (!document.fullscreenElement) {
                this.enterFullScreen();
            } else {
                this.exitFullScreen();
            }
        },

3.全屏

        enterFullScreen() {
            let element = document.documentElement;
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) { /* Firefox */
                element.mozRequestFullScreen();
            } else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
                element.webkitRequestFullscreen();
            } else if (element.msRequestFullscreen) { /* IE/Edge */
                element.msRequestFullscreen();
            }
        },

4.退出全屏

        exitFullScreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) { /* Firefox */
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) { /* IE/Edge */
                document.msExitFullscreen();
            }
        },