vue3全屏功能实现_vue3 全屏

vue3全屏功能实现

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

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();
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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