全屏解决方案 (screenfull or vueuse)

本文主要是介绍全屏解决方案 (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”

VueUse `useFullscreen` 使用 (方案二)

vueuse 文档

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

案例

    <button @click="toggle1">Go Fullscreen</button><divref="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();},},