JS web页面实现全屏/退出全屏

最新推荐文章于 2024-08-30 17:06:55 发布

Cxiaomu

最新推荐文章于 2024-08-30 17:06:55 发布

阅读量432

点赞数

分类专栏： VUE3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Cxiaomu/article/details/134813902

版权

VUE3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

技术栈：Vue3 + TypeScript + Ant Design Vue4

简介

部分项目在开发过程中，会有全屏功能的需求，实现指定元素全屏显示，比如数据大屏等。
于是，本篇来通过调用浏览器原生API实现此功能组件。

全屏组件

Vue 布局

需要全屏显示的Element id由外部动态传入，自定义。
增加两个icon对应进入全屏、退出全屏的操作入口，绝对定位。

<template>
  <div :id="eleId" class="fullScreenContainer">
    <FullscreenOutlined v-if="!isFull" @click="handleFull" class="fullScreenIcon" />
    <FullscreenExitOutlined v-else @click="existFull" class="fullScreenIcon" />
    <slot></slot>
  </div>
</template>
<style lang="scss" scoped>
.fullScreenContainer {
  position: relative;
}
.fullScreenIcon {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: gray;
}
</style>

TS逻辑

流程为进入页面，元素本为非全屏模式，监听页面全屏状态。
点击全屏icon，判断浏览器是否支持全屏且目标元素存在且浏览器全屏事件存在，条件成立，调用浏览器接口。
点击退出全屏icon，判断浏览器是否支持全屏且全屏元素存在且浏览器退出全屏事件存在，条件成立，调用浏览器接口。
维护 isFull 字段，控制全屏icon的显示。

import { defineComponent, ref } from 'vue'
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  name: 'FullScreen',
  props: {
    id: {
      type: String // elementId
    }
  },
  components: {
    FullscreenOutlined,
    FullscreenExitOutlined
  },
  setup(props) {
    const eleId = ref(props.id)
    const isFull = ref(false)

    // 检查是否支持全屏
    const checkIsFull = () => {
      return document.fullscreenEnabled
    }

    // 进入全屏
    const handleFull = () => {
      const element: HTMLElement | null = document.getElementById('fullScreenElement')
      if (checkIsFull() && element && element.requestFullscreen) {
        element.requestFullscreen().then(() => {
          isFull.value = true
        })
      }
    }

    // 退出全屏
    const existFull = () => {
      const fullscreenElement = document.fullscreenElement
      if (checkIsFull() && fullscreenElement && document.exitFullscreen) {
        document.exitFullscreen().then(() => {
          isFull.value = false
        })
      }
    }

    // 是否全屏状态变更时
    const handleFullscreenChange = () => {
      if (document.fullscreenElement) {
        isFull.value = true
        console.log('进入全屏模式')
      } else {
        isFull.value = false
        console.log('退出全屏模式')
      }
    }
    // 监听全屏状态
    document.addEventListener('fullscreenchange', handleFullscreenChange)

    return {
      eleId,
      isFull,
      handleFull,
      existFull
    }
  }
})