Vue3 全屏模式展示元素及监听全屏状态事件

描述

举个🌰：这里有一个需求，点击开启大屏按钮，使展示数据的元素全屏展示，全屏中当然还有一个关闭全屏按钮，这两个操作就需要调用开启全屏和关闭全屏的方法。但是必须要考虑一点就是当用户按 Esc 键时，也应该将全屏关闭，这就需要对全屏状态进行监听了。

1、激活全屏模式

对于一个你想要以全屏模式的元素，可以通过调用它的 Element.requestFullscreen() 方法就能简单的激活它的全屏模式。

// index.vue
<div v-if="isShowScreen" id="screen"></div>

// 点击开启全屏按钮事件
const clickHandle = () => {
    isShowScreen.value = true;
    nextTick(() => {
      const elem = document.getElementById('screen') as HTMLElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      }
    });
  };

2、关闭全屏模式

首先先来说说，通过我们编程方式调用 Document.exitFullscreen()，就是例子中说到的点击关闭按钮。

const offHandle = () => {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    }
  };

3、监听全屏事件

用户总是可以自行退出全屏模式的：按下 Esc 键，这时候我们就可以监听全屏的状态来做一些需求需要的操作

const checkFull =() => {
    let isFull = document.fullscreenElement?true:false;
    if (isFull === undefined||isFull === null) isFull = false;
    return isFull;
  };

onMounted(() => {
    window.addEventListener('fullscreenchange', () => {
    // 监听到屏幕变化，在回调中判断是否已退出全屏
         if(!checkFull()) {
          isShowScreen.value = false;  // 隐藏了全屏的内容
          document.exitFullscreen();
      }
    });
  });

最后需要注意的一点是：
浏览器之间的差异性，比如 Gecko 自动为元素添加了 CSS 规则，使其拉伸以填满屏幕。WebKit 没有这样做，所以可以加入以下代码：

#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

还有更多的全屏 API 可以参考全屏指南