vue3全屏功能实现

最新推荐文章于 2024-07-08 17:02:29 发布

m0_52611940

最新推荐文章于 2024-07-08 17:02:29 发布

阅读量945

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_52611940/article/details/134396657

版权

vue3全屏功能实现

      <div style="margin-right: 24px" @click="fullScreenHandle" class="pointer">
        {{ !isFullScreen ? "全屏操作" : "退出全屏" }}
      </div>

const isFullScreen = ref(false); // 是否是全屏状态
const fullScreenHandle = () => {
  isFullScreen.value = !isFullScreen.value;
  if (isFullScreen.value) {
    enterFullScreen(); // 进入全屏
  } else {
    exitFullscreen(); // 退出全屏
  }
};
// 进入全屏
const enterFullScreen = () => {
  // 获取layout的dom元素
  const parentNode: any = document.querySelector(".layout"); // 获取需要全屏的元素;
  // 进入全屏
  if (parentNode.requestFullscreen) {
    parentNode.requestFullscreen();
  } else if (parentNode.webkitRequestFullScreen) {
    parentNode.webkitRequestFullScreen();
  } else if (parentNode.mozRequestFullScreen) {
    parentNode.mozRequestFullScreen();
  } else if (parentNode.msRequestFullscreen) {
    // IE11
    parentNode.msRequestFullscreen();
  }
};
// 退出全屏
const exitFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if ((document as any).webkitCancelFullScreen) {
    (document as any).webkitCancelFullScreen();
  } else if ((document as any).mozCancelFullScreen) {
    (document as any).mozCancelFullScreen();
  } else if ((document as any).msExitFullscreen) {
    (document as any).msExitFullscreen();
  }
};

首先通过 document.querySelector(‘.layout’) 获取到需要全屏的元素节点，然后根据当前【isFullScreen 】是否处于全屏模式来判断是进入全屏模式还是退出全屏模式。如果不处于全屏模式，则调用 requestFullscreen() 进入全屏模式，如果已经处于全屏模式，则调用 document.exitFullscreen() 退出全屏模式