本文封裝一個網頁全屏的切換功能 直接呼叫函式即可實現

1. utils工具程式碼： 

/**
 * 瀏覽器判斷是否全屏
 */
export const fullscreenToggel = () => {
  if (fullscreenEnable()) {
    exitFullScreen()
  } else {
    reqFullScreen()
  }
}
/**
* esc監聽全屏
*/
export const listenfullscreen = (callback) => {
  function listen () {
    callback()
  }
  document.addEventListener(
 
'fullscreenchange', function () {
    listen()
  })
  document.addEventListener('mozfullscreenchange', function () {
    listen()
  })
  document.addEventListener('webkitfullscreenchange', function () {
    listen()
  })
  document.addEventListener('msfullscreenchange', function () {
    listen()
  })
}
 
/**
* 瀏覽器判斷是否全屏
*/
export const fullscreenEnable = () => {
  var isFullscreen = document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
  return isFullscreen
}

/**
* 瀏覽器全屏
*/
export const reqFullScreen = () => {
  if (document.documentElement.requestFullScreen) {
    document.documentElement.requestFullScreen()
  } 
 
else if (document.documentElement.webkitRequestFullScreen) {
    document.documentElement.webkitRequestFullScreen()
  } else if (document.documentElement.mozRequestFullScreen) {
    document.documentElement.mozRequestFullScreen()
  }
}
/**
* 瀏覽器退出全屏
*/
export const exitFullScreen = () => {
  if (document.documentElement.requestFullScreen) {
    document.exitFullScreen()
  } else if (document.documentElement.webkitRequestFullScreen) {
    document.webkitCancelFullScreen()
  } else if (document.documentElement.mozRequestFullScreen) {
    document.mozCancelFullScreen()
  }
}

2.使用方式:

引入：
import { fullscreenToggel } from '你的js檔案路徑'
使用:
<span @click="fullscreenToggel">全屏切換</span>

****在瀏覽器 f12 中試試效果*****：

//把這段程式碼複製在瀏覽器控制檯執行，即可瀏覽器全屏
const reqFullScreen = () => {
  if (document.documentElement.requestFullScreen) {
    document.documentElement.requestFullScreen()
  } else if (document.documentElement.webkitRequestFullScreen) {
    document.documentElement.webkitRequestFullScreen()
  } else if (document.documentElement.mozRequestFullScreen) {
    document.documentElement.mozRequestFullScreen()
  }
}
reqFullScreen()