小編給大家分享一下vue如何實現(xiàn)瀏覽器全屏展示功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為湘潭縣企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站制作，湘潭縣網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

1、項目中使用的是sreenfull插件，執(zhí)行命令安裝

npm install --save screenfull

2、安裝好后，引入項目，用一個按鈕進(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)聽到全屏的變化，因為如果是通過Esc鍵退出全屏，此時是沒辦法監(jiān)聽到的。經(jīng)過一番查找，解決辦法如下：

以上是“vue如何實現(xiàn)瀏覽器全屏展示功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！