VUE項目實現全屏顯示功能之screenfull用法
更新時間：2024年01月25日 10:30:38 作者：Queen_live
這篇文章主要介紹了VUE項目實現全屏顯示功能之screenfull用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
摘要
使用screenfull 插件 大多數開發(fā)項目中都需要全屏顯示功能，在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()
- 還可以檢測全屏狀態(tài) screenfull.isFullscreen
- 測試瀏覽器是否支持全screenfull screenfull.isEnabled
API
.request(ele)全屏.exit()退出全屏.toggle()切換全屏.on(event, function)：event為 ‘change’ | ‘error’ 注冊事件.off(event, function)：移除前面已經注冊的事件.element： 返回一個全屏的dom節(jié)點，如果沒有就為 null.isFullscreen: 是否是全屏狀態(tài).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動態(tài)路由設置的兩種方法小結
今天小編就為大家分享一篇vue-router之nuxt動態(tài)路由設置的兩種方法小結，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue 實現左右拖拽元素并且不超過他的父元素的寬度,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了使用vue-router在Vue頁面之間傳遞數據的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
element ui 表格動態(tài)列顯示空白bug 修復方法
今天小編就為大家分享一篇element ui 表格動態(tài)列顯示空白bug 修復方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章給大家分享了vue v-model動態(tài)生成的相關知識點以及實例代碼，有興趣的朋友參考學習下。2018-06-06
這篇文章主要介紹了vue單頁開發(fā)父子組件傳值思路詳解,本文是小編抽空整理的思路，感興趣的朋友跟隨腳本之家小編一起學習吧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