vue中浏览器全屏和退出全屏

1.首先要判断浏览器类型 （是否IE），来控制是否展示功能，在计算属性中判断：

computed: {
   showFullScreenBtn () {
     return window.navigator.userAgent.indexOf('MSIE') < 0;
   }
},

2.vue代码：

<i v-if="showFullScreenBtn" :class="isFullScreen?'el-icon-crop':'el-icon-full-screen'" class="backPage" @click="fullScreenLoad()">{{isFullScreen?'退出全屏':'全屏'}}</i>

3. isFullScreen变量和fullScreenLoad()方法控制是否全屏或者退出全屏

fullScreenLoad(){
      if(this.isFullScreen){
        // 退出全屏
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }  
      }else{
        // 全屏显示
        if (document.body.requestFullscreen) {
            document.body.requestFullscreen();
        } else if (document.body.mozRequestFullScreen) {
            document.body.mozRequestFullScreen();
        } else if (document.body.webkitRequestFullScreen) {
            document.body.webkitRequestFullScreen();
        } else if (document.body.msRequestFullscreen) {
            document.body.msRequestFullscreen();
        } 
      }
      
    }

4.created中监听各个浏览器全屏事件，控制isFullScreen

created(){
    //监听各浏览器fullscreenchange 事件处理
    document.addEventListener('fullscreenchange', () => {
      this.isFullScreen=!this.isFullScreen
    });
    document.addEventListener('mozfullscreenchange', () => {
      this.isFullScreen=!this.isFullScreen
    });
    document.addEventListener('webkitfullscreenchange', () => {
      this.isFullScreen=!this.isFullScreen
    });
    document.addEventListener('msfullscreenchange', () => {
      this.isFullScreen=!this.isFullScreen
    });
  },