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

官网链接

1. 安装

pnpm add screenfull

2. 使用

<template>
  <!-- 如果浏览器不支持全屏，则不显示这个图标 -->
  <div class="screen-full" @click="changeScreenFull()" v-if="isScreenEnable">
    <!-- 全屏和非全屏的图标 -->
    <SvgIcon
      :name="isScreenFull ? 'fullscreen-exit' : 'fullscreen'"
      color="#515151"
      width="30px"
      height="30px"
    ></SvgIcon>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import screenfull from 'screenfull'
// 是否支持全屏
const isScreenEnable = ref(screenfull.isEnabled)
// 用于控制图片状态
const isScreenFull = ref(false)
// 切换全屏
const changeScreenFull = () => {
  // 检查全屏功能是否可用
  if (!isScreenEnable.value) {
    ElMessage.error('浏览器不支持全屏')
    return
  }
  // 根据当前全屏状态进行切换
  if (screenfull.isFullscreen) {
    screenfull.exit()
    isScreenFull.value = false
  } else {
    screenfull.toggle()
    isScreenFull.value = true
  }
}
// 监听全屏状态, 当全屏状态改变时, 会触发change事件
onMounted(() => {
  screenfull.on('change', () => {})
})
// 停止监听
onUnmounted(() => {
  screenfull.off('change', () => {})
})
</script>

3. 方法

• 引入

import screenfull from 'screenfull'

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

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

• 开启全屏状态（方法）

screenfull.toggle()

• 退出全屏状态

screenfull.exit()

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

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

• 停止监听的回调

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