- 安装依赖
npm install --save screenfull
- 引用
import screenfull from "screenfull"
3.封装fullScreen/index:
javascript
<template>
<div>
<el-tooltip v-if="!content" effect="dark" :content="fullscreenTips" placement="bottom">
<i class="el-icon-full-screen" @click="handleFullscreenClick"></i>
</el-tooltip>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
props: {
element: {
type: String,
default: 'html'
},
openTips: {
type: String,
default: 'Fullscreen'
},
exitTips: {
type: String,
default: 'Exit Fullscreen'
},
content: {
type: Boolean,
default: false
}
},
data() {
return {
isFullscreen: false
};
},
computed: {
fullscreenTips() {
return this.isFullscreen ? this.exitTips : this.openTips;
},
},
methods: {
handleFullscreenClick() {
const dom = document.querySelector(this.element) || undefined;
if (screenfull.enabled) {
screenfull.toggle(dom);
this.isFullscreen = screenfull.isFullscreen;
}
},
handleFullscreenChange() {
this.isFullscreen = screenfull.isFullscreen;
// Clear all classes when exiting fullscreen
if (!this.isFullscreen) {
document.body.className = '';
}
},
handleKeyDown(event) {
// 检查是否按下了 ESC 键
if (event.key === 'Escape' && screenfull.isFullscreen) {
this.$message.warning('按 ESC 键可以退出全屏模式');
}
}
},
mounted() {
if (screenfull.enabled) {
screenfull.on('change', this.handleFullscreenChange);
document.addEventListener('keydown', this.handleKeyDown);
}
},
beforeDestroy() {
if (screenfull.enabled) {
screenfull.off('change', this.handleFullscreenChange);
document.removeEventListener('keydown', this.handleKeyDown);
}
}
};
</script>
4.vue页面使用
javascript
<template>
<div class="warpper" style="" id="digital-screen">
<div class="chartTitle">
<div class="logo"> 2024年6月17日 </div>
<div class="name"> 易恒智能模糊测试系统数据监控 </div>
<div class="time">
<Screenfull class="right-menu-item" :element="'#digital-screen'"/>
</div>
</div>
</div>
全屏的按钮根据实际需求更换!
very easy!!!