vue中监听ESC事件，全屏退出全屏

1.在需要全屏的元素上绑定一个 ref,这里用ref="fullscreenElement" 

<template>
    <div class="homeBox" ref="fullscreenElement" id="test">
        <div class="headerBox">
            <div style="position: relative; bottom: 6%; right: 10px">{{ currentTime }} {{ weekDay }}</div>
       <i  @click="toggleFullscreen"></i>
        </div>
        <div class="content">
            <div class="left">
                <leftTop/>
                <leftBottom/>
            </div>
            <div class="center">
                <centerTop/>
                <centerBottom/>
            </div>
            <div class="right">
                <rightTop/>
                <rightBottom/>
            </div>
        </div>
    </div>
</template>

2.点击全屏按钮，绑定事件

注意⚠️：这样的写法有缺点，如果你的全屏元素里面有表单，需要悬浮显示，将显示不出来；可以用另外的方法实现全屏（见 3），如果没有就用这块代码。比较简单。

   toggleFullscreen() {
        const element = this.$refs.fullscreenElement;
        if (element) {
          element.classList.toggle('fullscreen-element');
          if (document.fullscreenElement) {
            document.exitFullscreen();
          } else {
            element.requestFullscreen().catch(err => {
              console.error('进入全屏失败:', err);
            });
          }
        }
      },

3.另一种方法,是通过隐藏侧边栏顶部导航和其余的元素

    // 点击esc按钮或者浏览器退出的时候，↩↩️恢复侧边栏
    document.addEventListener('fullscreenchange', event => {
      if (document.fullscreenElement) {
        console.log(`Element: ${document.fullscreenElement.id} entered full-screen mode.`)
      } else {
        console.log('Leaving full-screen mode.')
        const header = document.querySelector('header')
        const aside = document.querySelector('aside')
        const placeholder = document.querySelector('.placeholder')
        const homeBox = document.getElementById('test')

        header.style.display = 'block'
        aside.style.display = 'block'
        placeholder.style.display = 'block'
        homeBox.style.height = 'calc(100vh - 64px)'
      }
    })
    this.timer = setInterval(() => {
      this.currentTime = new Date().toLocaleString() // 获得当前时间并转换成字符串格式
    }, 1000)
  },