VUE项目实现全屏显示功能之screenfull用法
更新时间：2024年01月25日 10:30:38 作者：Queen_live
这篇文章主要介绍了VUE项目实现全屏显示功能之screenfull用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
摘要
使用screenfull 插件 大多数开发项目中都需要全屏显示功能，在vue项目中有比较方便的插件 screenfull。
npm地址：https://www.npmjs.com/package/screenfull
点击图标 全屏显示
再次点击退出全屏或者Esc 退出
使用方法 npm install screenfull --save
- 首先安装 npm install screenfull --save
- 在使用.vue文件中 引入 import screenfull from 'screenfull'
- 在按钮方法中调用 screenfull.toggle()
- 还可以检测全屏状态 screenfull.isFullscreen
- 测试浏览器是否支持全screenfull screenfull.isEnabled
API
.request(ele)全屏.exit()退出全屏.toggle()切换全屏.on(event, function)：event为 ‘change’ | ‘error’ 注册事件.off(event, function)：移除前面已经注册的事件.element： 返回一个全屏的dom节点，如果没有就为 null.isFullscreen: 是否是全屏状态.isEnabled： 判断是否支持全屏
兼容性
Note: In order to use this package in Internet Explorer, you need a Promise polyfill.
Note: Safari is supported on desktop and iPad, but not on iPhone. This is a limitation in the browser, not in Screenfull.
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
解决vue打包后刷新页面报错：Unexpected token <
这篇文章主要介绍了解决vue打包后刷新页面报错：Unexpected token <相关知识点，需要的朋友们参考下。2019-08-08
今天小编就为大家分享一篇vue-router之nuxt动态路由设置的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue 实现左右拖拽元素并且不超过他的父元素的宽度,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了使用vue-router在Vue页面之间传递数据的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
今天小编就为大家分享一篇element ui 表格动态列显示空白bug 修复方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本篇文章给大家分享了vue v-model动态生成的相关知识点以及实例代码，有兴趣的朋友参考学习下。2018-06-06
这篇文章主要介绍了vue单页开发父子组件传值思路详解,本文是小编抽空整理的思路，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
在Vue 3.5.0-beta.3版本中新增了一个base watch函数,这个函数用法和我们熟知的watch API一模一样,下面就跟随小编一起来了解一下它的具体使用吧2024-11-11
这篇文章主要介绍了详解vue/cli 3使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文介绍了如何在Vue3中注册和使用全局组件,并解决了通过template定义组件时出现的警告问题,具体方法是在vite.config.js文件中配置Vue构建版本为vue.esm-bundler.js,以支持运行时编译,此操作确保全局组件可以正常工作并解决了编译警告2024-10-10
最新评论