vue天地图按钮控制全屏，f11全屏按键同步控制实现方法

本人网上找了半天也没有找到合适的，h5那些控制事件都是按钮级别的捕捉不到f11的事件，所以只能自己想办法实现了，特此记录下

vue布局：

<div class="mapMain" :style="mapMain">
       <!-- 地图布局 -->
      <div id="mapDiv"></div>
      <!-- 按钮布局 -->
      <div class="button-style">
            <el-button
              size="small"
              type="primary"
              plain
              style="float: right"
              @click="toggleFullscreen"
              >{{ fullScreenText }}</el-button
            >
      </div>
</div>

data数据：

 data() {
    return {
      fullscreen: false,
      fullScreenText: "全屏显示",
    }
},

methods方法：

methods: {
    
/** 全屏显示 */
    toggleFullscreen(state) {
      this.fullscreen = true;//设置全屏状态标识
      if (this.fullScreenText === "全屏显示") {
        if(state){//如果是点击按钮才执行此全屏事件，否则如果是f11的话会报错！     
          document.documentElement.requestFullscreen(); 
        }//开启全屏
        this.fullScreenText = "退出全屏";
        //改成全屏样式
        this.mapMain = {
          position: "fixed",
          left: 0,
          top: 0,
          width: "100%",
          height: "100vh",
          zIndex: 1002,
        };
      } else {
        if(state){//如果点击按钮才执行此退出全屏事件，否则如果是f11的话会报错！   
            document.exitFullscreen(); 
        }//关闭全屏
        this.fullScreenText = "全屏显示";
        this.mapMain = {};//改回默认样式
      }
      this.$nextTick(() => {
        this.map.checkResize(); //重新调整地图大小;
      });
      
    },
/** 监听全屏相关事件 */
    listenScreenfull() {
      /** 监听按键事件 */
      window.addEventListener("keydown", (event)=>{
          if (event.key === "F11") {
            this.toggleFullscreen();//执行全屏事件
          }
      }, true);
      
      /** 监听窗口变化事件， 由于按键f11事件无法监听到退出状态，所以需要此监听事件来处理退出全屏的事务 */
      window.onresize = () => {
        if (!this.fullscreen) {//根据此开关来判断当前是否在全屏状态，网上搜了很多都不靠谱，所以用开关方法实现检测全屏状态否
          this.fullScreenText = "全屏显示";
          this.mapMain = {}; //改回默认样式
          this.$nextTick(() => {
            this.map.checkResize(); //重新调整地图大小;
          });
        }
        //改回非全屏状态
        this.fullscreen = false;    
      };
    },   
   

}

 mounted 函数：

 mounted() {
    this.listenScreenfull();
    window.scrollTo(0,0); //页面打开以后需要激活当前页面，否则按f11 捕捉不到f11按键事件
  },