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

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>javascript">
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>javascript">
import { Icon } from '@/components/Icon' // 导入图标组件
import { useFullscreen } from '@vueuse/core' // 导入全屏切换功能
import { propTypes } from '@/utils/propTypes' // 导入属性类型验证工具
import { useDesign } from '@/hooks/web/useDesign' // 导入设计相关的 hookdefineOptions({ 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>javascript">
import { ref } from 'vue'
import { useFullscreen } from '@vueuse/core'
import { Icon } from '@/components/Icon' // 确保你有一个图标组件const color = ref('') // 可自定义颜色
const prefixCls = 'screenfull' // 类名前缀const { toggle, isFullscreen } = useFullscreen() // 使用全屏 hookconst 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>javascript">
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>javascript">
import { defineProps } from 'vue'const props = defineProps({icon: String,color: String,size: {type: [String, Number],default: 24}
})
</script>