基于Vue实现页面全屏封装的详细步骤
作者：庚云
众所周知：目前可视化大屏,视频播放等常见功能都需要用到全屏,本文将使用两种技术实现全屏功能的封装,让不同技术栈的同学都可以轻松掌握,好了,让我们来实现一个既兼容性强又易于管理的全屏功能组件吧,需要的朋友可以参考下
前言
众所周知：目前可视化大屏，视频播放等常见功能都需要用到全屏。本文将使用两种技术实现全屏功能的封装，让不同技术栈的同学都可以轻松掌握。好了，让我们来实现一个既兼容性强又易于管理的全屏功能组件吧。
技术方案
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页面全屏封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！