后台列表页–全屏和退出全屏操作

后台列表页–全屏和退出全屏操作

需求：后台用的是vue3+elementui-Plus构建编写，当前需要给列表数据的展示添加全屏和退出全屏的操作。

实现：用hooks全局封装了全屏和退出全屏的方法供页面引入使用

import { ref, onMounted, onUnmounted } from 'vue';

/**
 * @param { Object } element 页面的Dom节点
 * @returns { Boolean } isFullScreen 是否全屏
 * @returns { Function } toggleFullscreen 触发全屏
 */

export default function useFullscreen(element) {
  const isFullScreen = ref(false);

  // 全屏并做兼容性处理
  const enterFullscreen = (el) => {
    if (el) {
      el.style.backgroundColor = '#fff';
      if (el.requestFullscreen) {
        el.requestFullscreen();
      } else if (el.mozRequestFullScreen) { // Firefox
        el.mozRequestFullScreen();
      } else if (el.webkitRequestFullscreen) { // Chrome, Safari and Opera
        el.webkitRequestFullscreen();
      } else if (el.msRequestFullscreen) { // IE/Edge
        el.msRequestFullscreen();
      }
    }
  };

  // 退出全屏并做兼容性处理
  const exitFullscreen = () => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { // Firefox
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { // IE/Edge
      document.msExitFullscreen();
    }
  };

  // 判断是否处于全屏状态(含兼容性处理)
  const isDocumentFullscreen = () => {
    const isFull = document.fullscreenElement
      || document.webkitFullscreenElement
      || document.mozFullScreenElement
      || document.msFullscreenElement;
    if (isFull) {
      return true;
    }
    return false;
  };

  // 判断当前屏幕状态
  const judgeScreenStatus = () => {
    if (isDocumentFullscreen()) {
      isFullScreen.value = true;
    } else {
      isFullScreen.value = false;
    }
  };

  const toggleFullscreen = () => {
    if (isFullScreen.value) {
      exitFullscreen();
    } else {
      enterFullscreen(element.value);
    }
  };

  onMounted(() => {
    window.addEventListener('fullscreenchange', judgeScreenStatus);
  });

  onUnmounted(() => {
    window.removeEventListener('fullscreenchange', judgeScreenStatus);
  });

  return {
    isFullScreen,
    toggleFullscreen,
  };
}

页面使用

<el-button
    type="primary"
    plain
    @click="toggleFullscreen"
>全屏</el-button>

<el-button
    v-if="isFullScreen"
    type="primary"
    plain
    @click="toggleFullscreen"
>退出全屏</el-button>

import useFullscreen from '@/hooks/toggleFullscreen'; // 全屏的自定义hooks

// 全屏操作，需要具备全屏操作的div
const fullscreenDiv = ref(null);
const { isFullScreen, toggleFullscreen } = useFullscreen(fullscreenDiv);

最后全屏效果如下

![在这里插入图片描述](https://img-blog.csdnimg.cn/e2e77fbb574f4c55877e4c9a10e90681.png