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

官网链接

1. 安装

javascript 复制代码
pnpm add screenfull

2. 使用

javascript 复制代码
<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. 方法

  • 引入
javascript 复制代码
import screenfull from 'screenfull'
  • 是否可以全屏(属性)(浏览器的支持)
javascript 复制代码
// 返回值是boolean类型
screenfull.isEnabled
  • 开启全屏状态(方法)
javascript 复制代码
screenfull.toggle()
  • 退出全屏状态
javascript 复制代码
screenfull.exit()
  • 监听全屏状态发生改变时,可以执行回调
javascript 复制代码
screenfull.on('change', () => {})
  • 停止监听的回调
javascript 复制代码
screenfull.off('change', () => {})
相关推荐
今天又在摸鱼几秒前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿3 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再5 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5559 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录14 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000015 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl16 分钟前
深度剖析Kafka读写机制
前端
FogLetter16 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan17 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan18 分钟前
vscode webview 插件开发(交付篇)
前端