Vue 3 全屏切换组件（附Demo）

news2024/11/22 21:36:22

1. 基本知识

在这里插入图片描述

全屏 API
document.documentElement.requestFullscreen()：请求全屏模式
document.exitFullscreen()：退出全屏模式
document.fullscreenElement：返回当前处于全屏状态的元素

基本的Demo如下：

<template>
  <div @click="toggleFullscreen">
    <Icon :icon="isFullscreen ? 'exit-fullscreen-icon' : 'enter-fullscreen-icon'" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isFullscreen = ref(false)

const toggleFullscreen = () => {
  if (!isFullscreen.value) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
  isFullscreen.value = !isFullscreen.value
}
</script>

2. 拓展

为更好的简化代码，有可重用性

可使用如下Demo形式

<script lang="ts" setup>
import { Icon } from '@/components/Icon' // 导入图标组件
import { useFullscreen } from '@vueuse/core' // 导入全屏切换功能
import { propTypes } from '@/utils/propTypes' // 导入属性类型验证工具
import { useDesign } from '@/hooks/web/useDesign' // 导入设计相关的 hook

defineOptions({ name: 'ScreenFull' }) // 定义组件名称

const { getPrefixCls } = useDesign() // 获取设计前缀

const prefixCls = getPrefixCls('screenfull') // 生成带前缀的类名

defineProps({
  color: propTypes.string.def('') // 定义 color 属性，默认值为空字符串
})

const { toggle, isFullscreen } = useFullscreen() // 使用全屏功能

const toggleFullscreen = () => {
  toggle() // 切换全屏状态
}
</script>

<template>
  <div :class="prefixCls" @click="toggleFullscreen"> <!-- 点击切换全屏 -->
    <Icon
      :color="color"
      :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" 
      :size="18"
    />
  </div>
</template>

在这个全屏组件的代码中，使用了组合 API 和 @vueuse/core 库的 useFullscreen 来简化全屏切换的逻辑

提供了简单的 toggle 方法和 isFullscreen 状态，减少了手动管理全屏状态的复杂性

3. 延伸

为更好的展示延伸Demo，此处的Demo展示过程示例：

创建项目：

vue create fullscreen-demo
cd fullscreen-demo

在项目中安装 @vueuse/core：npm install @vueuse/core
创建全屏组件

在 src/components 目录下创建 ScreenFull.vue 文件：

<template>
  <div :class="prefixCls" @click="toggleFullscreen">
    <Icon
      :color="color"
      :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
      :size="18"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useFullscreen } from '@vueuse/core'
import { Icon } from '@/components/Icon' // 确保你有一个图标组件

const color = ref('') // 可自定义颜色
const prefixCls = 'screenfull' // 类名前缀

const { toggle, isFullscreen } = useFullscreen() // 使用全屏 hook

const toggleFullscreen = () => {
  toggle() // 切换全屏
}
</script>

<style scoped>
.screenfull {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
</style>

使用全屏组件
在 src/App.vue 中使用刚创建的全屏组件：

<template>
  <div id="app">
    <h1>全屏切换示例</h1>
    <ScreenFull />
  </div>
</template>

<script lang="ts" setup>
import ScreenFull from './components/ScreenFull.vue' // 引入全屏组件
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>

创建图标组件
在 src/components 目录下创建 Icon.vue 文件
为了简化，使用了 SVG 图标：

<template>
  <svg :width="size" :height="size" :fill="color">
    <use :xlink:href="icon"></use>
  </svg>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps({
  icon: String,
  color: String,
  size: {
    type: [String, Number],
    default: 24
  }
})
</script>