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實現瀏覽器全屏展示功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！