全屏解决方案 (screenfull or vueuse)

ScreenFull 使用 (方案一)

参考文章@朝阳 39

参考文章@半夏_2021

安装

npm install screenfull --save
(默认是 6.0,vue2 环境下会报错,所以需要安装 5.1.0)

vue2 安装

npm i screenfull@5.1.0

引入

import screenfull from “screenfull”;

调用

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

// 方法
screenfull.request(); // 全屏
screenfull.exit(); // 退出全屏
screenfull.toggle(); // 全屏切换 (将指定元素作为参数传入,则只会对该元素进行全屏切换)

案例

<i class="el-icon-full-screen" @click="fullScreenHandler">供应商风险评定</i>

<script>
    import screenfull from 'screenfull'
   function fullScreenHandler() {
    if (screenfull.isEnabled && !screenfull.isFullscreen) {
      screenfull.toggle(this.$refs.fullScreen)
      console.log('点击全屏')
    }
  },
</script>

踩坑报错并解决

因为版本问题报错

• 如果你使用的是 vue2,则使用 5.1.0，因为默认安装 版本是 6.0，在 vue2 环境下会报错
• vue2 安装指令 : npm i screenfull@5.1.0

screenFull 配合 element-ui 使用报错

element[fn.requestFullscreen] is not a function

如何想让 elementui 组件使用全屏功能,可能会报上述错误.

解决办法:

在 elementui 组件外面包一层 div,并给该 div 添加 ref=“screenFull”

screenFull.isFullscreen 属性一直返回 false

错误代码：

<i class="el-icon-full-screen" @click="fullScreenHandler">全屏</i>

<script>
  //  点击全屏的时候 ，screenfull.isFullscreen 一直返回false
  fullScreenHandler() {
    console.log('request-全屏', screenfull.isFullscreen)
    if (screenfull.isEnabled && !screenfull.isFullscreen) {
      screenfull.toggle(this.$refs.fullScreen)
    }
  },
</script>

解决方法：

在文件初始化(mounted)的时候，监听 screenfull 的变化，然后判断是否为全屏
注意： 尽量在 mounted 的时候监听。，不要在 点击全屏按钮的时候监听，否则会重复添加 change 的监听事件。

<i class="el-icon-full-screen" @click="fullScreenHandler">全屏</i>

<script>
  mounted() {
    // 关键代码 ,监听 screenfull 的change事件，然后判断是否为全屏 给全局变量 isFullsccreeen 赋值
    screenfull.on('change', () => {
      this.isFullscreen = screenfull.isFullscreen
      // 监听change事件后， 全屏时 screenfull.isFullscreen 返回 true , 退出全屏时返回 false
      console.log('change', screenfull.isFullscreen)
    })

  }
  fullScreenHandler() {
    if (screenfull.isEnabled && !screenfull.isFullscreen) {
      screenfull.toggle(this.$refs.fullScreen)
    }
  },
</script>

VueUse useFullscreen 使用 (方案二)

vueuse 文档

<UseFullscreen v-slot="{ toggle }">
  <video />
  <button @click="toggle">Go Fullscreen</button>
</UseFullscreen>

案例

    <button @click="toggle1">Go Fullscreen</button>
    <div
      ref="box"
      class="box"
      style="height: 300px; width: 300px; background-color: tomato"
    ></div>

import { useFullscreen } from "@vueuse/core";


  methods: {
    toggle1() {
      let { toggle } = useFullscreen(this.$refs.box);
      toggle();
    },
  },