Vue使用ScreenFull插件实现全屏切换

官网链接
1. 安装

1. pnpm add screenfull

复制代码

2. 使用

1. <template>
2.   <!-- 如果浏览器不支持全屏，则不显示这个图标 -->
3.   <div class="screen-full" @click="changeScreenFull()" v-if="isScreenEnable">
4.     <!-- 全屏和非全屏的图标 -->
5.     <SvgIcon
6.       :name="isScreenFull ? 'fullscreen-exit' : 'fullscreen'"
7.       color="#515151"
8.       width="30px"
9.       height="30px"
10.     ></SvgIcon>
11.   </div>
12. </template>
14. <script setup lang="ts">
15. import { ref, onMounted, onUnmounted } from 'vue'
16. import { ElMessage } from 'element-plus'
17. import screenfull from 'screenfull'
19. // 是否支持全屏
20. const isScreenEnable = ref(screenfull.isEnabled)
21. // 用于控制图片状态
22. const isScreenFull = ref(false)
23. // 切换全屏
24. const changeScreenFull = () => {
25.   // 检查全屏功能是否可用
26.   if (!isScreenEnable.value) {
27.     ElMessage.error('浏览器不支持全屏')
28.     return
29.   }
30.   // 根据当前全屏状态进行切换
31.   if (screenfull.isFullscreen) {
32.     screenfull.exit()
34.     isScreenFull.value = false
35.   } else {
36.     screenfull.toggle()
38.     isScreenFull.value = true
39.   }
40. }
41. // 监听全屏状态, 当全屏状态改变时, 会触发change事件
42. onMounted(() => {
43.   screenfull.on('change', () => {})
44. })
45. // 停止监听
46. onUnmounted(() => {
47.   screenfull.off('change', () => {})
48. })
49. </script>

复制代码

3. 方法

• 引入
  

1. import screenfull from 'screenfull'

复制代码

• 是否可以全屏（属性）（浏览器的支持）
  

1. // 返回值是boolean类型
2. screenfull.isEnabled

复制代码

• 开启全屏状态（方法）
  

1. screenfull.toggle()

复制代码

• 退出全屏状态
  

1. screenfull.exit()

复制代码

• 监听全屏状态发生改变时，可以执行回调
  

1. screenfull.on('change', () => {})

复制代码

• 停止监听的回调
  

1. screenfull.off('change', () => {})

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。