浏览器全屏，按下两次esc方法的解决思路

 浏览器全屏之后添加键盘事件，当再次按下esc取消全屏时候我们会发现第一次的键盘事件是不触发的，解决思路如下。

首先安装依赖，命令行输入

npm install screenfull

 然后引入

import screenfull from "screenfull";

模板中写入

<template>
  <div>
    <button @click="but">全屏</button>
    <!-- <div class="animation">哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div> -->
    <button @click="kaiqi">开启关闭</button>
  </div>
</template>

<script>
import screenfull from "screenfull";
import { ref, onMounted, reactive } from "vue";
export default {
  setup() {
    const isFullscreen = ref(false);
    const but = () => {
      screenfull.toggle();
    };
    const change = () => {
      isFullscreen.value = screenfull.isFullscreen;
      // console.log(isFullscreen.value);
      if (isFullscreen.value == true) {
        console.log("打开全屏");
      } else if (isFullscreen.value == false) {
        console.log("关闭全屏");
      }
    };
    onMounted(() => {
      screenfull.on("change", change);
      console.log(isFullscreen.value);
    });
    const isanimation = reactive({
      animation: false,
    });
    const kaiqi = () => {
      isanimation.animation = !isanimation.animation;
    };
    return {
      isanimation,
      kaiqi,
      change,
      isFullscreen,
      but,
    };
  },
};
</script>