前言
各位掘友,我是庚云。众所周知:目前可视化大屏,视频播放等常见功能都需要用到全屏。本文将使用两种技术实现全屏功能的封装,让不同技术栈的同学都可以轻松掌握。好了,让我们来实现一个既兼容性强又易于管理的全屏功能组件吧。
技术方案
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>
第四步:运行项目
一切准备就绪,让我们启动项目,看看效果吧:
npm run serve
打开浏览器,点击“一键全屏”按钮,见证奇迹的时刻!按下
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>
效果图:
总结
通过上述代码,我们可以实现一个简单的全屏功能,适用于大多数现代浏览器。 希望这篇博客能帮助到你,如果你有任何问题或建议,欢迎在评论区留言讨论。
感兴趣的朋友点点赞,支持下笔者,反响好的话后面打算继续更新视频全屏播放
和如何防止录屏
相关功能。