vue实现全屏

1、页面放两个按钮，全屏和非全屏，通过一个变量记录页面是否全屏，展示对应的按钮；

2、给按钮绑定对应的事件

3、通过监听页面fullscreenchange事件，对变量进行赋值

  <el-tooltip
        class="item"
        effect="dark"
        content="退出全屏"
        placement="bottom"
      >
        //fullMap全屏状态
        <img
          @click="exitFullscreen()"
          v-if="fullMap"
          class="screen-btn quit"
          src="@/assets/quit.png"
          alt=""
        />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
        <img
          @click="launchIntoFullscreen()"
          v-if="!fullMap"
          class="screen-btn"
          src="@/assets/full.png"
          alt=""
        />
      </el-tooltip>

  // 全屏
    launchIntoFullscreen() {
        //可以选择整个页面全屏，也可以设置某个div的全屏
      var element = document.getElementById("map-contain");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },

 //退出全屏方法
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },

  mounted() {
    document.addEventListener("fullscreenchange", this.handleKeyDown);

  },
  beforeUnmount() {
    window.removeEventListener("fullscreenchange", this.handleKeyDown);
  },
  methods:{
    handleKeyDown() {
      const isFullScreen =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement;
      this.fullMap = isFullScreen ? true : false;
    },}