【Vue实用功能】Vue实现浏览器全屏退出全屏

Vue实现浏览器全屏

vue代码

      <v-btn class="ml-2" @click="fullScreen" v-show="!is_small_screen">
        <i v-show="!is_full" class="iconfont iconfangda full"></i>
        <i v-show="is_full" class="iconfont iconsuoxiao full"></i>
      </v-btn>

js代码

    data() {
    
    
      return {
    
    
        is_full: false,
      }
    },
    methods: {
    
    
		/** 全屏 **/
      fullScreen() {
    
    
        if (this.is_full) {
    
     //退出全屏
          if (document.exitFullScreen) document.exitFullscreen();
          //兼容火狐
          if (document.mozCancelFullScreen) document.mozCancelFullScreen();
          //兼容谷歌等
          if (document.webkitExitFullscreen) document.webkitExitFullscreen();
          //兼容IE
          if (document.msExitFullscreen) document.msExitFullscreen();
        } else {
    
     //进入全屏
          if (document.documentElement.RequestFullScreen) document.documentElement.RequestFullScreen();
          //兼容火狐
          if (document.documentElement.mozRequestFullScreen) document.documentElement.mozRequestFullScreen();
          //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
          if (document.documentElement.webkitRequestFullScreen) document.documentElement.webkitRequestFullScreen();
          //兼容IE,只能写msRequestFullscreen
          if (document.documentElement.msRequestFullscreen) document.documentElement.msRequestFullscreen();
        }
        this.is_full = !this.is_full;
      },
	}