js监听页面是否设置全屏

utils.ts全局函数定义文件

/**
 * 是否是全屏
 * @returns
 */
function isFullScreen(): any {
  return !!(
    (document as any).fullscreen ||
    (document as any).mozFullScreen ||
    (document as any).webkitIsFullScreen ||
    (document as any).webkitFullScreen ||
    (document as any).msFullScreen
  );
}

/**
 * 全屏
 * @param ele
 */
function full(ele: any): void {
  if (ele.requestFullscreen) {
    ele.requestFullscreen();
  } else if (ele.mozRequestFullScreen) {
    ele.mozRequestFullScreen();
  } else if (ele.webkitRequestFullscreen) {
    ele.webkitRequestFullscreen();
  } else if (ele.msRequestFullscreen) {
    ele.msRequestFullscreen();
  }
}

/**
 * 退出全屏
 */
function exitFullscreen() {
  if ((document as any).exitFullScreen) {
    (document as any).exitFullScreen();
  } else if ((document as any).mozCancelFullScreen) {
    (document as any).mozCancelFullScreen();
  } else if ((document as any).webkitExitFullscreen) {
    (document as any).webkitExitFullscreen();
  } else if ((document as any).msExitFullscreen) {
    (document as any).msExitFullscreen();
  }
}

export function fullScreen(el: any | null): void {
  const isSupportFullScreen =
    (document as any).fullscreenEnabled ||
    (document as any).mozFullScreenEnabled ||
    (document as any).webkitFullscreenEnabled ||
    (document as any).msFullscreenEnabled;
  if (!isSupportFullScreen) {
    app.$YsMessage.error("抱歉，当前游览器不支持全屏");
    return;
  }
  // 判断当前是否是全屏
  if (isFullScreen()) {
    exitFullscreen();
  } else {
    full(el);
  }
}

vue中使用全屏函数

<template>
  <div ref="graph">
    <span style="margin-right: 10px; font-size: 18px; cursor: pointer;" @click="fullscreen"><Icon type="ios-expand" /></span>
  </div>
</template>

<script>
import { fullScreen } from "utils";
export default {
  methods: {
    fullscreen() {
      this.$fullScreen(this.$refs.graph);
    },
  }
}
</script>

<style lang="scss" scoped>

</style>

vue中监听全屏事件

在全屏模式中，有时候需要监听某些事件的触发，比如监听全屏状态的改变，可以使用fullscreenchange事件来实现。代码如下：

<script>
export default {
  mounted() {
    document.addEventListener("fullscreenchange", this.handleFullScreenChange);
  },
  methods: {
    handleFullScreenChange() {
      if(document.fullscreenElement) {
        console.log("进入全屏模式");
      } else {
        console.log("退出全屏模式");
      }
    }
  }
}
</script>