【Vue3+Element Plus】从0-1搭建后台管理系统(05)-全屏FullScreen

功能清单

1. 点击头部导航栏的全屏图标进入全屏状态
2. 进入全屏状态以后，全屏图标应变成退出全屏图标 3.点击退出全屏图标退出全屏，图标变成全屏图标

具体实现

全屏这里我打算做一个hook函数，因为到时候可能不单单整个页面需要全屏功能，可能其他的元素也需要全屏，所以将全屏功能封装成一个hook函数。

useFullscreen hook函数的代码

import { ElMessage } from 'element-plus'
import { ref, type Ref } from 'vue'

/** 是否处于全屏状态 */
export const useFullscreen = (): Ref<boolean> => {
  const isFullscreen = ref(false)
  return isFullscreen
}

/** 判断浏览器是否支持全屏 */
export const fullscreenEnabled = (): boolean => {
  return !!document.fullscreenEnabled
}

/** 全屏/退出全屏切换，接收参数为一个响应式对象和一个元素对象，如果不传默认为根元素html */
export const useToggleFullscreen = (
  isFullscreen: Ref<boolean>,
  element: HTMLElement = document.documentElement
): (() => void) => {
  /** 监听全屏/退出全屏事件 */
  element.addEventListener('fullscreenchange', function () {
    /** 如果全屏元素不为null，那么显示收起图标，如果全屏的元素为null显示展开图标 */
    isFullscreen.value = !!document.fullscreenElement
  })
  return function () {
    if (!fullscreenEnabled()) {
      /** 如果浏览器不支持全屏，提示用户 */
      ElMessage.warning('浏览器不支持全屏API')
    } else {
      /** 浏览器支持全屏的情况下： */
      if (!isFullscreen.value) {
        element?.requestFullscreen()
      } else {
        document.fullscreenElement && document.exitFullscreen()
      }
    }
  }
}

在组件中使用

<template>
  <div class="toggle-screen dark:text-white" @click="toggleScreen">
    <iconify-icon v-if="!isFullScreen" icon-name="bx:fullscreen"></iconify-icon>
    <iconify-icon v-else icon-name="icon-park-outline:off-screen"></iconify-icon>
  </div>
</template>

<script setup lang="ts">
/** 引入iconify-icon */
import IconifyIcon from '@/components/Icon/IconifyIcon.vue'
/** 引入 useFullScreen 全屏hook函数 */
import { useFullscreen, useToggleFullscreen } from '@/hooks/useFullScreen'
defineOptions({
  name: 'FullScreen'
})

/** 是否全屏状态 */
const isFullScreen = useFullscreen()
/** 全屏组件的点击事件 */
const toggleScreen = useToggleFullscreen(isFullScreen)
</script>
<style lang="scss" scoped></style>