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()
    }
  }
}
相关推荐
遂心_1 天前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
遂心_1 天前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy1 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
一个不爱写代码的瘦子1 天前
迭代器和生成器
前端·javascript
源猿人1 天前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
RoyLin1 天前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
小桥风满袖1 天前
极简三分钟ES6 - ES9中for await of
前端·javascript
编程贝多芬2 天前
Promise 的场景和最佳实践
前端·javascript
Asort2 天前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript