PC端页面全屏展示

功能描述：
实现点击一个按钮，全屏展示，再点击退出全屏；

html

<div class="userImg userImg1">
        <span
          v-if="!isFullScreen"
          class="fullScreenBtn"
          @click="handleFullScreen"
        >
          <svg-icon icon-class="full-screen-line"></svg-icon>
          全屏
        </span>
        <span
          v-if="isFullScreen"
          class="fullScreenBtn"
          @click="handleFullScreen"
        >
          <svg-icon icon-class="full-screen-exit-line"></svg-icon>
          退出全屏
        </span>
      </div>

js部分

 handleFullScreen() {
      let element = document.documentElement;
      if (this.isFullScreen) {
        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();
        }
      }
      this.isFullScreen = !this.isFullScreen;
    },