本文例項為大家分享了Vue使用screenfull實現全屏的具體程式碼，供大家參考，具體內容如下

安裝

npm install --save screenfull

在需要的頁面引用

import screenfull from 'screenfull'

全屏使用

<template>
 <span @click='clickFullscreen'>全屏</span>
</template>
 
<script>
 import screenfull from 'screenfull'
 export default{
 name: 'screenfull',data(){
  return {
  isFullscreen: false
  }
 },methods:{
  clickFullscreen(){
  if (!screenfull.isEnabled) {
   this.$message({
   message: 'you browser can not work',type: 'warning'
   })
   return false
  }
  screenfull.toggle()
  }
 }
 }
</script>

原生實現方法

// 全屏事件 相容
clickFullscreen() {
   let element = document.documentElement;
    if (this.isFullscreen) {
     if (document.exitFullscreen) {
      document.exitFullscreen();
     } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
     } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
     } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
     }
    } else {
     if (element.requestFullscreen) {
      element.requestFullscreen();
     } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
     } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
     } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
     }
    }
    this.isFullscreen= !this.isFullscreen;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。