前端-全屏功能

const isFullScreen = ref(false)
//全屏
const fullScrenn = () => {
  let element = document.documentElement
  if (element.requestFullscreen) {
	element.requestFullscreen()
  } else if (element.webkitRequestFullScreen) {
	element.webkitRequestFullScreen()
  } else if (element.mozRequestFullScreen) {
	element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
	// IE11
	element.msRequestFullscreen()
  }
}

const exitFullscreen = () => {
  //退出全屏
  if (document.exitFullScreen) {
	document.exitFullScreen()
  } else if (document.mozCancelFullScreen) {
	document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
	document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) {
	document.msExitFullscreen()
  }
}

const jugeIsScreen = () => {
  if (isFullScreen.value) {
	exitFullscreen()
  } else {
	fullScrenn()
  }
}

const judegIsFullScreen = () => {
  // 可视区域的高度
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
  // screen是window的属性方法，window.screen可省略window，指的是窗口
  isFullScreen.value = screen.height == clientHeight
  window.onresize = () => {
	// 可视区域的高度
	const clientHeight = document.documentElement.clientHeight || document.body.clientHeight
	// screen是window的属性方法，window.screen可省略window，指的是窗口
	isFullScreen.value = screen.height == clientHeight
  }
}