vue如何實現瀏覽器全屏展示功能

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

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

npm install --save screenfull

2、安裝好后，引入項目，用一個按鈕進行控制即可，按鈕方法如下：

toggleFullscreen() {
  if (!screenfull.enabled) {
   this.$message({
    message: 'you browser can not work',
    type: 'warning'
   })
   return false
  }
  screenfull.toggle()
}

試了一下可以全屏，我用的chrome，IE9以下不要考慮

3、第一步完成之后就是怎么監聽到全屏的變化，因為如果是通過Esc鍵退出全屏，此時是沒辦法監聽到的。經過一番查找，解決辦法如下：

<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 = () => {
      // 全屏下監控是否按鍵了ESC
      if (!this.checkFull()) {
       // 全屏下按鍵esc后要執行的動作
       this.isFullscreen = false
      }
     }
    }
}
</script>

以上是“vue如何實現瀏覽器全屏展示功能”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！