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 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
GISer_Jing2 小时前
ByteDance——jy真题
前端·javascript·面试
真的想不出名儿2 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
阳光阴郁大boy2 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
sorryhc3 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy3 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui
lvchaoq3 小时前
react 修复403页面无法在首页跳转问题
前端·javascript·react.js
郝开3 小时前
6. React useState基础使用:useState修改状态的规则;useState修改对象状态的规则
前端·javascript·react.js
技术钱5 小时前
react+andDesign+vite+ts从零搭建后台管理系统(三)-Layout布局
javascript·react.js·ecmascript
DoraBigHead6 小时前
🧭 React 理念:让时间屈服于 UI —— 从同步到可中断的演化之路
前端·javascript·面试