vue实现全屏screenfull-封装组件

1. 安装依赖

npm install --save screenfull

2. 引用

import screenfull from "screenfull"

3.封装fullScreen/index:

<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 fullscreenif (!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页面使用

<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!!!