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.
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue3 vite配置css 的sourceMap及文件引用配置别名的过程
这篇文章主要介绍了Vue3 vite配置css的sourceMap,及文件引用配置别名的过程，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了element-ui 文件上传修改文件名的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,下面这篇文章主要给大家介绍了关于Vue3中ref与reactive的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了Vue实现购物车计算总价功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
vue如何使用vant组件的field组件disabled修改默认样式
这篇文章主要介绍了vue如何使用vant组件的field组件disabled修改默认样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue中的config配置 ,本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2018-01-01
这篇文章主要介绍了解决VUE的对话框el-dialog点击外部消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了rollup打包vue组件并发布到npm,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
vue.js中created方法是一个生命周期钩子函数，一般可以在created函数中调用ajax获取页面初始化所需的数据，这篇文章主要介绍了Vue中created和mounted使用场景分析,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了vue自定义指令实现v-tap插件的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最新评论