current position:Home>Vue/js operation DOM full screen switch, full screen open dom requestFullscreen();

Vue/js operation DOM full screen switch, full screen open dom requestFullscreen();

2022-06-24 09:14:41Uninstall engine

Use svg Icon , Color can be modified :

<span class="full-screen" title=" Full screen switching " @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 Implementation code :dom.requestFullscreen();

/** * @description:  Case list full screen switching  */  
  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([email protected]/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;
      }
    }
  }
}

copyright notice
author[Uninstall engine],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/175/202206240757123759.html

Random recommended