1、安装 screenfull

npm install screenfull --save

安装之后，在需要实现全屏的vue文件中import，但是出现下面这个问题：

You may need an appropriate loader to handle this file type,currently no loaders are configured to process this file, See....

解决过程尝试安装一些缺少的style-loader、css-loader。但是本地的node版本已经是16了，担心版本配置不对问题，到时候会更麻烦。

然后尝试降低screenfull的版本：

npm i screenfull@5

然后再次重启，发现没问题了。

2、screenfull引入、属性和方法

import screenfull from "screenfull";    //需要实现全屏的文件引入即可

screenfull.isFullscreen; // 布尔值——当前页面是否全屏
screenfull.isEnabled; // 布尔值——当前浏览器是否支持全屏

screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换

3、整页全屏、整页退出全屏【单个图标】

记得引入 

import screenfull from "screenfull";  

3.1 整页全屏和退出全屏代码如下

 

// 全屏图标
<i class="el-icon-full-screen" @click="fullScreen()"></i>

// 退出全屏图标
<i class="icon-exit-screen.svg" @click="ullScreen()"></i>

 data () {
    return {
        // 默认不全屏——属性
        isFullscreen: false,
    }
}

methods: {
    // 控制全屏
    fullScreen () {
      if (screenfull.isEnabled && !screenfull.isFullscreen) {
        screenfull.request()
        this.$message({
          message: '已全屏',
          type: 'success'
        })
      }
    },

    //控制退出全屏
    exitFullScreen () {
      if (screenfull.isEnabled && screenfull.isFullscreen) {
        screenfull.exit()
        this.$message({
          message: '已退出全屏',
          type: 'success'
        })
      }
    }
}

4、切换图标实现全屏效果

记得别忘记import   screenfull 

<div>
    <i class="el-icon-full-screen" @click="toggleFullscreen()" v-if="!isFullscreen"></i>
    <img
        ref="myImg"
        width="17"
        src="../assets/fonts/icon-exit-screen.svg"
        alt=""
        @click="toggleFullscreen()"
        v-else
    />
</div>

 data () {
    return {
        // 默认不全屏——属性
        isFullscreen: false,
    }
}

mounted () {
    // 监听窗口大小改变，screenfull.isFullscreen的值为是否全屏，若是则true，反之false
    window.onresize = () => {
      this.isFullscreen = screenfull.isFullscreen
    }
  },

methods: {
    // 切换全屏方法
    toggleFullscreen () {
      if(!screenfull.isEnabled){     //判断一下浏览器是否支持全屏显示
        this.$message({
          message:'浏览器不能全屏',
          type:'warning'
        })
        return false
      }
      screenfull.toggle()
    }
}

相信还有比上面更简洁方便的方法，这个虽不是最好的，但是能实现就行了嘿嘿

得以顺利实现全屏效果，中间分别参考以下这两位博客的文章。

vue 全屏 screenfull —— 整页全屏，指定元素全屏，退出全屏，全屏切换等_朝阳39的博客-CSDN博客_screenfull退出全屏

vue项目实现全屏，可监听是否全屏而更改图标呦_清新小伙子的博客-CSDN博客_vue监听是否全屏