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开发手册Function-based API RFC使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了vue中如何实现样式之间的切换及vue动态样式的实现方法，本文给大家介绍的非常详细，具有参考借鉴价值,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了vue 避免变量赋值后双向绑定的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本文主要介绍了Element实现动态增加多个输入框并校验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
Openlayer具有自己的扩展插件ol-ext，可以用来实现图形的拖拽、旋转、缩放、拉伸、移动等操作，本文将主要介绍通过Openlayer实现图形的拖动和旋转，需要的同学可以学习一下2021-11-11
这篇文章主要介绍了vue使用swiper的时候第二轮事件不会触发问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
最近在做项目时,需要进行两个组件联动,一个轮询获取到消息,然后将其传递给另外一个组件进行横向滚动展示,结果滚动的速度越来越快。接下来通过本文给大家分享Vue中消息横向滚动时setInterval清不掉的问题及解决方法，感兴趣的朋友一起看看吧2019-08-08
这篇文章主要介绍了vue之moment的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的，这篇文章主要介绍了Vue中$set()的使用方法场景分析,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了你了解vue3.0响应式数据怎么实现吗，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
最新评论