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()
    }
  }
}
相关推荐
小螺号dididi吹1 小时前
【React】状态管理
前端·javascript·react.js
代码的余温1 小时前
React Refs:直接操作DOM的终极指南
前端·javascript·react.js
一只小风华~1 小时前
JavaScript 定时器
开发语言·前端·javascript·vue.js·web
典学长编程2 小时前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第二天(CSS)
前端·javascript·css·html
Chase_______2 小时前
JavaWeb笔记2-JavaScript&Vue&Ajax
开发语言·javascript·vue.js
源力祁老师3 小时前
外部系统获取Odoo数据最便捷的方式
开发语言·前端·javascript
GISer_Jing3 小时前
下次接好运~
开发语言·javascript·ecmascript
xingba3 小时前
学习 TreeWalker api 并与普通遍历 DOM 方式进行比较
javascript·api·dom
前端小咸鱼一条5 小时前
React组件化的封装
前端·javascript·react.js
随便起的名字也被占用5 小时前
leaflet中绘制轨迹线的大量轨迹点,解决大量 marker 绑定 tooltip 同时显示导致的性能问题
前端·javascript·vue.js·leaflet