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

前言

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

技术方案

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>

效果图：