vue 全屏和退出全屏

Dear 丶 2022-12-06 15:48 302阅读 0赞

html源码：

<div id="allScreen" @click="showScreen" > 
    
     <div >全屏内容  </div>
    
          <span v-if="!fullscreen">全屏显示</span>
    
           <span  v-else-if="fullscreen">退出全屏</span>
    
        </div>
    
    js源码
    
      data() {
    
        return {
    
          fullscreen:false,
    
        };
    
      },
    
      methods: {
    
         /**
    
         * 全屏展示
    
         */
    
         showScreen(){
    
            let element = document.getElementById('allScreen');//id为allScreen的容器全屏现实
    
              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) {
    
                  // IE11
    
                  element.msRequestFullscreen();
    
                }
    
              }
    
              this.fullscreen = !this.fullscreen;
    
        }
    
          },