vue實(shí)現(xiàn)瀏覽器全屏展示功能
更新時(shí)間：2019年11月27日 09:44:46 作者：稚于最初灬
這篇文章主要介紹了vue實(shí)現(xiàn)瀏覽器全屏展示功能,項(xiàng)目中使用的是sreenfull插件，執(zhí)行命令安裝，具體實(shí)現(xiàn)代碼跟隨小編一起看看吧
1、項(xiàng)目中使用的是sreenfull插件，執(zhí)行命令安裝
npm install --save screenfull
2、安裝好后，引入項(xiàng)目，用一個(gè)按鈕進(jìn)行控制即可，按鈕方法如下：
toggleFullscreen() {
if (!screenfull.enabled) {
this.$message({
message: 'you browser can not work',
type: 'warning'
})
return false
}
screenfull.toggle()
}
試了一下可以全屏，我用的chrome，IE9以下不要考慮
3、第一步完成之后就是怎么監(jiān)聽到全屏的變化，因?yàn)槿绻峭ㄟ^Esc鍵退出全屏，此時(shí)是沒辦法監(jiān)聽到的。經(jīng)過一番查找，解決辦法如下：
<script>
import screenfull from 'screenfull'
export default {
data () {
return {
isFullscreen: false
}
}，
methods: {
/**
* 全屏事件
*/
screenfull() {
if (!screenfull.enabled) {
this.$message({
message: 'Your browser does not work',
type: 'warning'
})
return false
}
screenfull.toggle()
this.isFullscreen = true
},
/**
* 是否全屏并按鍵ESC鍵的方法
*/
checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
// to fix : false || undefined == undefined
if (isFull === undefined) {
isFull = false
}
return isFull
}
},
mounted() {
window.onresize = () => {
// 全屏下監(jiān)控是否按鍵了ESC
if (!this.checkFull()) {
// 全屏下按鍵esc后要執(zhí)行的動(dòng)作
this.isFullscreen = false
}
}
}
}
</script>
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)瀏覽器全屏展示功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vue+阿里的G2圖表-antv+折線圖實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3中toRef、toRefs都是與響應(yīng)式數(shù)據(jù)相關(guān)的，本文主要來給大家講解一下Vue3中的toRef和toRefs的使用，感興趣的朋友跟隨小編一起看看吧2023-01-01
這篇文章主要介紹了詳解如何寫出一個(gè)利于擴(kuò)展的vue路由配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了vue傳值方式的十二種方法總結(jié),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了Vue2與Vue3中Ref綁定元素方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
本篇文章主要介紹了初步認(rèn)識(shí)理解Vuex，Vuex就是在一個(gè)項(xiàng)目中，提供唯一的管理數(shù)據(jù)源的倉(cāng)庫(kù),有興趣的可以了解一下2017-04-04
vue項(xiàng)目開啟Gzip壓縮和性能優(yōu)化操作
這篇文章主要介紹了vue項(xiàng)目開啟Gzip壓縮和性能優(yōu)化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue中的主動(dòng)觸發(fā)點(diǎn)擊事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了VUE 3D輪播圖封裝實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
在Vue中獲取自定義屬性方法:data-id的實(shí)例
這篇文章主要介紹了在Vue中獲取自定義屬性方法:data-id的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09