Vue3项目全屏化处理方案

4,515 阅读1分钟

1:screenfull 原理及方案分析

screenfull (全屏) 功能实现

原理:

对于 screenfull 而言,浏览器本身已经提供了对用的 API点击这里即可查看,这个 API 中,主要提供了两个方法:

  1. Document.exitFullscreen():该方法用于请求从全屏模式切换到窗口模式
  2. Element.requestFullscreen():该方法用于请求浏览器(user agent)将特定元素(甚至延伸到它的后代元素)置为全屏模式
    1. 比如我们可以通过 document.getElementById('app').requestFullscreen() 在获取 id=appDOM 之后,把该区域置为全屏

但是通常情况下我们不会直接使用该 API 来去实现全屏效果,而是会使用它的包装库 screenfull

方案:

那么明确好了原理之后,接下来实现方案就比较容易了。

整体的方案实现分为两步:

  1. 封装 screenfull 组件
    1. 展示切换按钮
    2. 基于 screenfull 实现切换功能
  2. 引入该组件

2:方案落地:screenfull

明确好了方案之后,接下来我们就落地该方案

封装 screenfull 组件:

  1. 下载依赖包 screenfull

    npm i screenfull@5.1.0
    
  2. 创建 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";