1:screenfull 原理及方案分析
screenfull (全屏)
功能实现
原理:
对于 screenfull
而言,浏览器本身已经提供了对用的 API
,点击这里即可查看,这个 API
中,主要提供了两个方法:
Document.exitFullscreen()
:该方法用于请求从全屏模式切换到窗口模式Element.requestFullscreen()
:该方法用于请求浏览器(user agent)将特定元素(甚至延伸到它的后代元素)置为全屏模式- 比如我们可以通过
document.getElementById('app').requestFullscreen()
在获取id=app
的DOM
之后,把该区域置为全屏
- 比如我们可以通过
但是通常情况下我们不会直接使用该 API
来去实现全屏效果,而是会使用它的包装库 screenfull
方案:
那么明确好了原理之后,接下来实现方案就比较容易了。
整体的方案实现分为两步:
- 封装
screenfull
组件- 展示切换按钮
- 基于 screenfull 实现切换功能
- 引入该组件
2:方案落地:screenfull
明确好了方案之后,接下来我们就落地该方案
封装 screenfull
组件:
-
下载依赖包 screenfull
npm i screenfull@5.1.0
-
创建
components/Screenfull/index
<template> <div> <el-button @click="onToggle" >点击{{ isFullscreen ? "exit-fullscreen" : "fullscreen" }}</el-button > </div> </template> <script setup> import { ref, onMounted, onUnmounted } from "vue"; import screenfull from "screenfull"; // 是否全屏 const isFullscreen = ref(false); // 监听变化 const change = () => { isFullscreen.value = screenfull.isFullscreen; }; // 切换事件 const onToggle = () => { screenfull.toggle(); }; // 设置侦听器 onMounted(() => { screenfull.on("change", change); }); // 删除侦听器 onUnmounted(() => { screenfull.off("change", change); }); </script> <style lang="scss" scoped></style>
引入该组件
<screenfull class="right-menu-item hover-effect" /> import Screenfull from "@/components/Screenfull";