vue实现全屏screenfull-封装组件

1. 安装依赖

npm install --save screenfull

2. 引用

import screenfull from "screenfull"

3.封装fullScreen/index:

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