vue/js操作dom全屏切换,全屏打开dom.requestFullscreen()；

使用svg图标，可修改颜色：

<span class="full-screen" title="全屏切换" @click="fullScreen" ref="fullIcon">
   <svg viewBox="0 0 1024 1024">
   		<path d="M358.4 768H426.666667v85.333333H213.333333v-213.333333h85.333334v68.266667l128-128 59.733333 59.733333-128 128z m345.6 0l-128-128 59.733333-59.733333 132.266667 132.266666V640h85.333333v213.333333h-213.333333v-85.333333h64zM358.4 298.666667l128 128-59.733333 59.733333-128-128V426.666667H213.333333V213.333333h213.333334v85.333334H358.4z m345.6 0H640V213.333333h213.333333v213.333334h-85.333333V354.133333l-132.266667 132.266667-59.733333-59.733333 128-128z" p-id="4052">path>
   svg>
span>

js实现代码：dom.requestFullscreen();

/**
   * @description: 案件列表全屏切换
   */  
  fullScreen() {
    const dom = this.$refs.fullScreenBox as any;
    const doc = document as any;
    let fullIcon = this.$refs.fullIcon as any;
    this.fullScreenFlag = !this.fullScreenFlag;

    if (this.fullScreenFlag){
      //fullIcon.style.transform = 'rotate(0deg)';
      if (dom.requestFullscreen) {
        dom.requestFullscreen();
      } else if (dom.webkitRequestFullScreen) {
        dom.webkitRequestFullScreen();
      } else if (dom.mozRequestFullScreen) {
        dom.mozRequestFullScreen();
      } else {
        dom.msRequestFullscreen();
      }
    }else{
      //fullIcon.style.transform = 'rotate(180deg)';
      if (document.fullscreenElement && doc.exitFullscreen) {
        doc.exitFullscreen();
      } else if (doc.mozCancelFullScreen) {
        doc.mozCancelFullScreen();
      } else if (doc.msExitFullscreen) {
        doc.msExiFullscreen();
      } else if (doc.webkitCancelFullScreen) {
        doc.webkitCancelFullScreen();
      }
    }
  }

scss:

.full-screen{
  position: absolute;
  left: 45%;
  display: inline-block;
  height: 100%;
  // background: url(~@/assets/images/screen-chizhou-dark/fullscreen.svg) no-repeat center;
  // background-size: cover;
  transform: rotate(180deg);

  svg{
    height: 0.32rem;
    path {
      fill: rgba(255, 255, 255, 0.8);
    }
    &:hover{
      path {
        fill: #fff;
      }
    }
  }
}