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>
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值