<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>
以上是自己解决全屏问题的两种方案，如各位大佬有更好的解决方案，欢迎在下方评论
  
分类：
 前端
 
标签：
 
Vue.js前端
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

    LazyBone