基于Vue实现页面全屏封装的详细步骤

更新时间：2024年08月25日 08:30:43 作者：庚云

众所周知：目前可视化大屏,视频播放等常见功能都需要用到全屏,本文将使用两种技术实现全屏功能的封装,让不同技术栈的同学都可以轻松掌握,好了,让我们来实现一个既兼容性强又易于管理的全屏功能组件吧,需要的朋友可以参考下

前言

众所周知：目前可视化大屏，视频播放等常见功能都需要用到全屏。本文将使用两种技术实现全屏功能的封装，让不同技术栈的同学都可以轻松掌握。好了，让我们来实现一个既兼容性强又易于管理的全屏功能组件吧。

技术方案

1. vue3 + screenfull库

2. 原生js

一、vue3 + screenfull库方案

第一步：准备工作

首先，确保你已经安装了Vue CLI。如果没有，那就赶紧的：

npm install -g @vue/cli

然后，创建一个新的Vue 3项目：

vue create fullscreen-vue
cd fullscreen-vue

接下来，安装screenfull，这个小小的库将是我们实现全屏功能的大功臣：

npm install screenfull

第二步：创建全屏组件

在src/components目录下，创建一个名为FullscreenComponent.vue的文件。这里，我们将编写我们的全屏组件。

<template>
  <div>
    <!-- 按钮用于触发全屏切换 -->
    <button @click="toggleFullscreen">一键全屏</button>
    <!-- 全屏内容区域，使用ref进行引用 -->
    <div ref="fullscreenElement" class="fullscreen-content">
      <p>看我看我，我是全屏内容！</p>
    </div>
  </div>
</template>

<script>
import screenfull from 'screenfull';

export default {
  name: 'FullscreenComponent',
  data() {
    return {
      isFullscreen: false, // 用于跟踪当前是否处于全屏状态
    };
  },
  mounted() {
    // 检查screenfull是否可用，并监听全屏状态变化
    if (screenfull.isEnabled) {
      screenfull.on('change', this.onFullscreenChange);
    }
    // 监听ESC键按下事件，用于退出全屏
    document.addEventListener('keydown', this.handleEscKey);
  },
  beforeUnmount() {
    // 组件卸载时移除事件监听
    if (screenfull.isEnabled) {
      screenfull.off('change', this.onFullscreenChange);
    }
    document.removeEventListener('keydown', this.handleEscKey);
  },
  methods: {
    toggleFullscreen() {
      // 切换全屏状态
      if (screenfull.isEnabled) {
        if (this.isFullscreen) {
          screenfull.exit(); // 退出全屏
        } else {
          screenfull.request(this.$refs.fullscreenElement); // 进入全屏
        }
      } else {
        alert('哎呀，你的浏览器不支持全屏功能哦。');
      }
    },
    onFullscreenChange() {
      // 更新全屏状态
      this.isFullscreen = screenfull.isFullscreen;
    },
    handleEscKey(event) {
      // 按下ESC键时退出全屏
      if (event.key === 'Escape' && this.isFullscreen) {
        screenfull.exit();
      }
    },
  },
};
</script>

<style scoped>
.fullscreen-content {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding: 20px;
  box-sizing: border-box;
}
</style>

第三步：在主应用中使用全屏组件

打开src/App.vue，引入并使用我们的全屏组件：

<template>
  <div id="app">
    <!-- 使用全屏组件 -->
    <FullscreenComponent />
  </div>
</template>

<script>
import FullscreenComponent from './components/FullscreenComponent.vue';

export default {
  name: 'App',
  components: {
    FullscreenComponent, // 注册全屏组件
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

第四步：运行项目

一切准备就绪，让我们启动项目，看看效果吧：

打开浏览器，点击“一键全屏”按钮，见证奇迹的时刻！按下Esc键，全屏模式瞬间消失，仿佛什么都没发生过。

二、原生js方案

在某些场景下，我们可能不需要引入额外的库，而是希望使用原生JavaScript来实现全屏功能。下面是一个使用原生JavaScript实现全屏功能的示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> <!-- 设置文档字符编码为UTF-8 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，使其适应设备宽度 -->
  <title>Document</title> <!-- 设置文档标题 -->
</head>
<body>
  <!-- 主内容区域，设置样式使其显示为绿色、大字体、加粗 -->
  <div id="main" style="color: green; font-size: 100px; font-weight: 700;">
    看我看我，我是庚云！
  </div>
  <!-- 全屏按钮 -->
  <button id="btn">全屏</button>
  <script>
    // 获取主内容区域的DOM元素
    let elem = document.getElementById('main');
    // 获取全屏按钮的DOM元素
    let btn = document.getElementById('btn');
    // 为按钮添加点击事件监听器，点击时调用requestFullScreen函数并传入主内容区域元素
    btn.addEventListener('click', () => {
      requestFullScreen(elem);
    });
    // 定义requestFullScreen函数，用于请求全屏显示指定元素
    function requestFullScreen(element) {
      // 尝试获取不同浏览器下的全屏请求方法
      var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
      // 如果存在全屏请求方法，则调用该方法
      if (requestMethod) {
          requestMethod.call(element);
      } else if (typeof window.ActiveXObject !== "undefined") {
          // 如果浏览器支持ActiveXObject（通常是IE浏览器），则模拟按下F11键进入全屏
          var wscript = new ActiveXObject("WScript.Shell");
          if (wscript !== null) {
              wscript.SendKeys("{F11}");
          }
      }
  }
  </script>
</body>
</html>

效果图：

总结

通过上述代码，我们可以实现一个简单的全屏功能，适用于大多数现代浏览器。

到此这篇关于基于Vue实现页面全屏封装的详细步骤的文章就介绍到这了,更多相关Vue页面全屏封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3+vite+axios 配置连接后端调用接口的实现方法
这篇文章主要介绍了vue3+vite+axios 配置连接后端调用接口的实现方法，在vite.config.ts文件中添加配置，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
2022-12-12
vue项目Luckysheet的使用
这篇文章主要介绍了vue项目Luckysheet的使用,目前Luckysheet不支持使用npm安装包，所以只能使用CDN引入依赖，在vue项目的public/index.html文件里引入即可，本文通过示例代码给大家详细介绍，需要的朋友可以参考下
2022-08-08
详解Vue如何将多个空格被合并显示成一个空格
这篇文章主要为大家详细介绍了在Vue中如何将多个空格被合并显示成一个空格,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-04-04
从零开始搭建vue移动端项目到上线的步骤
这篇文章主要介绍了从零开始搭建vue移动端项目到上线的步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
详解vue实现坐标拾取器功能示例
这篇文章主要介绍了详解vue实现坐标拾取器功能示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
vue组件实现首次加载就触发watch
这篇文章主要介绍了vue组件实现首次加载就触发watch方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue中input获取光标位置并追加内容
这篇文章主要给大家介绍了关于vue中input获取光标位置并追加内容的相关资料,vue通过当前的光标来进行插值,从而需要去获取光标所在的位置,需要的朋友可以参考下
2023-07-07
Vue Electron实现输入法自动刷字数功能详解
这篇文章主要介绍了Vue Electron实现输入法自动刷字数功能，文中的示例代码讲解详细，对我们学习C#有一定的帮助，感兴趣的小伙伴可以跟随小编一起了解一下
2022-12-12
使用Vant如何完成各种Toast提示框
这篇文章主要介绍了使用Vant如何完成各种Toast提示框，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue3中简单实现动态添加路由
本文主要介绍了Vue3中简单实现动态添加路由，，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05