基于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页面全屏封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

登录页面的实现及跳转代码实例(vue-router)
在Vue.js中可以使用vue-router来实现前端路由,通过路由来跳转页面,这篇文章主要给大家介绍了关于登录页面的实现及跳转(vue-router)的相关资料,需要的朋友可以参考下
2023-12-12
案例实操vue事件修饰符带你快速了解与应用
这篇文章主要介绍了vue常见的事件修饰符,在平时无论是面试还是学习工作中都会经常遇到的,本文就带你快速上手,需要的朋友可以参考下
2023-03-03
vue中如何监听url地址栏参数变化
这篇文章主要介绍了vue中如何监听url地址栏参数变化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue3 自定义指令控制按钮权限的操作代码
这篇文章主要介绍了vue3 自定义指令控制按钮权限,为了提高用户体验，当该按钮无权使用时，使用el-tooltip功能进行提醒，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
vue清空数组的几个方式(小结)
本文主要介绍了vue清空数组的几个方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-12-12
vue+Ant Design进度条滑块与input联动效果实现
最近接到这样一个需求滑块进度与输入框为一致,默认值为80,最小不能小于30,最大为100，怎么实现这个联动效果呢，下面小编给大家分享下基于vue+Ant Design进度条滑块与input联动效果的实现，感兴趣的朋友跟随小编一起看看吧
2022-12-12
Vue 自定义指令实现一键 Copy功能
指令 (Directives) 是带有 v- 前缀的特殊特性。这篇文章主要介绍了Vue 自定义指令实现一键 Copy的功能,需要的朋友可以参考下
2019-09-09
详解Vue组件复用和扩展之道
这篇文章主要介绍了Vue组件复用和扩展，对vue感兴趣的同学，可以参考下
2021-05-05
vue3组件中v-model的使用以及深入讲解
在vue2中v-model使用的还是挺多的,不过这个指令一般是用在了输入框中,并且这个指令其实就是个语法糖,下面这篇文章主要给大家介绍了关于vue3组件中v-model的使用以及深入讲解的相关资料,需要的朋友可以参考下
2021-09-09
vue实现简单的计算器功能
这篇文章主要为大家详细介绍了vue实现简单的计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09