Vue3 使用 v-scale-screen 如何使用js点击事件触发全屏

Vue3 使用 v-scale-screen 如何使用js点击事件触发全屏

大家肯定遇到过需要点击大屏内元素后,自动进入全屏模式。

一般大家的方案会是使用js获取界面元素 然后设置设置其全屏方法

typescript 复制代码
const isFullscreen = document.fullscreenElement !== null;
const elem = document.getElementById("layout");
if (isFullscreen) {
    // 此处需判断不同浏览器的全屏api
    if (document.exitFullscreen) {
        await document.exitFullscreen();
    }
} else {
    if (elem?.requestFullscreen) {
        await elem.requestFullscreen();
    }
}

此方案与v-scale-screen有冲突,不管是给VScaleScreen组件设置id还是给其子组件或父组件设置id 都会出现界面拉伸错误或者直接黑屏的问题

vue 复制代码
<template>
    <VScaleScreen width="1920" height="1080" :delay="200">
        <div class="layout">
            ...
        </div>
    </VScaleScreen>
</template>

<script lang="ts" setup>
import VScaleScreen from "v-scale-screen"
</script>

解决方案是 screenfull

bash 复制代码
npm install screenfull
typescript 复制代码
import screenfull from 'screenfull'

// 全屏
const fullscreen = async () => {
  if (screenfull.isEnabled) {
    if (!screenfull.isFullscreen) {
      // 全屏
      screenfull.request()
    } else {
      // 取消全屏
      screenfull.exit()
    }
  }
}
相关推荐
汪子熙38 分钟前
Vite 极速时代的构建范式
前端·javascript
叶常落38 分钟前
[react] js容易混淆的两种导出方式2025-08-22
javascript
摸着石头过河的石头3 小时前
大模型时代的前端开发新趋势
前端·javascript·ai编程
洋流3 小时前
0基础进大厂,第22天 : CSS中的定位布局,你的.container还找不到位置吗?
前端·javascript·面试
讨厌吃蛋黄酥3 小时前
面试官问 “React Hooks 为啥不能在条件里用”,这么答才显真水平!多数人只知其然
前端·javascript·面试
言兴3 小时前
从输入 URL 到页面显示:深入理解浏览器缓存机制
前端·javascript·面试
讨厌吃蛋黄酥3 小时前
前端跨域难题终结者:从JSONP到CORS,一文搞定所有跨域问题!
前端·javascript·后端
阿星做前端3 小时前
coze源码解读:项目启动
前端·javascript
言兴3 小时前
面试题之解析“类组件”与“组件”的本质
前端·javascript·面试
aidingni8883 小时前
告别 DDL 难题:使用 Skapi 的零设置关系数据库 API
前端·javascript