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()
    }
  }
}
相关推荐
saadiya~1 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
百锦再1 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
瓜瓜怪兽亚3 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院3 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233403 小时前
React组件完全指南
前端·javascript·react.js
EndingCoder3 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
qq7798233403 小时前
React Hooks完全指南
前端·javascript·react.js
Moment4 小时前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
软件技术NINI4 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html
DoraBigHead4 小时前
React Fiber:从“递归地狱”到“时间切片”的重生之路
前端·javascript·react.js