本文主要是介绍全屏解决方案 (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();},},这篇关于全屏解决方案 (screenfull or vueuse)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
