vue-web全屏问题

方法一

• 自己写一个开启和关闭全屏的方法,会存在全屏时无法监听按键事件ESC退出全屏时修改状态值问题。(亲测谷歌、火狐、360、QQ；浏览器、Microsoft Edge都可以)

<template>
  <div class="aaa">
    <el-button type="primary" @click="handleFullScreen">全屏</el-button>
  </div>
</template>

data(){
    return {
      fullScreen: false,
    }
},
methods:{
    handleFullScreen(){
      let dom = document.documentElement;
      // 判断是否已经全屏，是全屏时则退出全屏状态;否则则进入全屏
      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(dom.requestFullscreen){
            dom.requestFullscreen();
        }else if(dom.webkitRequestFullScreen){
            dom.webkitRequestFullScreen();
        }else if(dom.mozRequestFullScreen){
            dom.mozRequestFullScreen();
        }else if(dom.msRequestFullScreen){
            dom.msRequestFullScreen();// IE11
        }
      }
      this.fullScreen = !this.fullScreen;
    },
    // 判断当前是否为全屏状态
    checkFull(){
      let isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement
       || document.msFullscreenElement;
      if( !isFull){
        isFull = false;
      }else {
        isFull = true;
      }
      return isFull;
    }
  },

解决方案

• 写一个方法在页面大小发生变化时在mounted监听事件返回值，确定当前是全屏状态还是退出全屏状态，再进行确定是否修改状态值。

//判断全屏关闭状态和状态值同事满足条件时，修改状态
mounted(){
    window.addEventListener('resize', () => {
      if(!this.checkFull() && this.fullScreen){
        this.fullScreen = false;
      }
    })
  },

方法二

• 采用第三方插件screenfull能够完美解决web端的浏览器全屏问题，自己简单使用了一下（本人是单独写成一个组件，来进行使用；想要更深一步的了解插件可以自行去官方查看文档），在下面贴出代码：

使用npm命令下载插件  npm install screenfull

<template>
    <div style="float:left">
        <el-button type="primary"  @click="handleScreenFull"><i class="iconfont">&#xe8b8;</i></el-button>
    </div>
</template>
<script>
import screenfull from 'screenfull';

export default {
    name: "ScreenFull",
    data(){
        return {
            isFullScreen: false,
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        handleScreenFull() {
            if(!screenfull.isEnabled){
                return false;
            }
            screenfull.toggle();
        },
        change() {
            this.isFullScreen = screenfull.isFullscreen;
        },
        init() {
            if(screenfull.isEnabled){
                screenfull.on('change', this.change);
            }
        },
    },
    destroy() {
        if(screenfull.isEnabled){
            screenfull.off('change', this.change);
        }
    }
}
</script>

父组件中使用
<template>
  <div class="aaa">
    <screen-full />
  </div>
</template>

<script>
import screenFull from "@/components/ScreenFull.vue"
export default {
  name: "Header",
  components: {
    screenFull
  }
</script>

以上是自己解决全屏问题的两种方案，如各位大佬有更好的解决方案，欢迎在下方评论