Vue3 使元素切换到全屏模式

最新推荐文章于 2024-03-19 14:08:37 发布

风也萧萧，雨也萧萧

最新推荐文章于 2024-03-19 14:08:37 发布

阅读量270

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43358289/article/details/132302833

版权

vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue3 使元素切换到全屏模式

使用 Fullscreen API 使元素切换到全屏模式

<template>
  <div>
    <button @click="toggleFullscreen">开启全屏</button>
    <div ref="fullscreenElement">全屏元素</div>
  </div>
</template>

切换全屏

<script setup lang="ts">

const fullscreenElement = ref<HTMLElement>();

const toggleFullscreen = () => {
    // 返回当前文档中正在以全屏模式显示的Element节点，如果没有使用全屏模式，则返回null
    if (document.fullscreenElement) {
        // 切换到窗口模式
        document.exitFullscreen();
    } else {
        // 切换到全屏模式
        fullscreenElement.value?.requestFullscreen();
    }
}
</script>

注意：这里没有处理切换出错、状态改变等相关事件；可在mdn查询相关事件和兼容性。

mdn地址：https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API