Vue切换全屏

<style lang="less">

</style>
<template>
  <div>
    <span class="full-screen" @click="screen">
      
      <i
        :class="fullscreen ? 'iconfont icontuichuquanping' : 'iconfont iconfullscreen'"
      ></i>
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fullscreen: false, 
    }
  },
  mounted() {
    let that = this;
    document.addEventListener("fullscreenchange", () => {
      that.fullscreen = !that.fullscreen;
    });
    document.addEventListener("mozfullscreenchange", () => {
      that.fullscreen = !that.fullscreen;
    });
    document.addEventListener("webkitfullscreenchange", () => {
      that.fullscreen = !that.fullscreen;
    });
    document.addEventListener("msfullscreenchange", () => {
      that.fullscreen = !that.fullscreen;
    });
  },
  methods:{
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
    },
  },
  watch: {
    fullscreen(v, o) {
      //切换头部样式
      let box = document.getElementsByClassName("wrapper-box")[0];
      let top = document.getElementsByClassName("wrapper-header")[0];
      if (v) {
        top.style.display = "none";
        box.style.marginTop = 0;
      } else {
        top.style.display = "block";
        box.style.marginTop = 56 + "px";
      }
    },
  },
}
</script>

let fullscreen;
let fsEnter = document.getElementById('fullscr');
fsEnter.addEventListener('click', function (e) {
    e.preventDefault();
    if (!fullscreen) {
        fullscreen = true;
        document.documentElement.requestFullscreen();
        fsEnter.innerHTML = "退出全屏";
    }
    else {
        fullscreen = false;
        document.exitFullscreen();
        fsEnter.innerHTML = "全屏预览";
    }
});