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', () => {})
相关推荐
YGY Webgis糕手之路2 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔2 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang2 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔2 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任3 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴3 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔3 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
德育处主任3 小时前
p5.js 矩形rect绘制教程
前端·数据可视化·canvas
前端工作日常3 小时前
我学习到的babel插件移除Flow 类型注解效果
前端·babel·前端工程化
SY_FC3 小时前
uniapp input 聚焦时键盘弹起滚动到对应的部分
javascript·vue.js·elementui