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

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