全屏 显示

 注意：

1.需要通过 document.fullscreenElement 判断 当前是否是全屏状态  全屏状态则存放的是全屏状态的节点 若不是全屏状态则为null     定义一个变量 通过document.fullscreenElement  展示相应的状态

2.尽量避免直接定义一个变量 通过这个变量去控制是否全屏   因为ESC也可以退出全屏状态 若只通过变量控制 极有可能出现 非全屏状态下 展示退出的情况

以下代码可以整合到一起

父组件 html
 <header class="big-screen-header-wrapper">
        <big-screen-header
          :controlScreen="controlScreen"
          :isFullScreen="isFullScreen"
        />
      </header>

父组件js

<script setup>
import {ref,onMounted,onUnmounted} from "vue"

//需要全屏的元素
var elem = null
//是否全屏
var isFullScreen = ref('全屏')

//监听全屏变化 用于addEventListener 监听  ESC退出时 不会触发controlScreen  但isFullScreen状态应该改变
const fullscreenchanged = event => {
  // 如果有元素处于全屏模式，则 document.fullscreenElement 将指向该元素。如果没有元素处于全屏模式，则该属性的值为 null。
 // console.log('document.fullscreenElement', document.fullscreenElement)
  if (document.fullscreenElement) {
    // console.log(`全屏`)
    //全屏显示退出
    isFullScreen.value ='退出'
  } else {
    // console.log('非全屏')
    //非全屏 显示全屏
    isFullScreen.value = '全屏'
  }
}
//控制全屏 退出全屏
const controlScreen = () => {
  if (document.fullscreenElement) {

    console.log('全屏 点击后不是全屏 显示全屏')
    isFullScreen.value = '全屏'
    closeFullscreen()
  } else {
    //不是全屏 显示全屏
    console.log('不是全屏 点击后是全屏 显示退出')
 
    isFullScreen.value = '退出'
    FullScreen()
  }
}

//设置全屏
const FullScreen = () => {
  if (elem.requestFullscreen) {
    elem.requestFullscreen()
  } else if (elem.mozRequestFullScreen) {
    /* Firefox */
    elem.mozRequestFullScreen()
  } else if (elem.webkitRequestFullscreen) {
    /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen()
  } else if (elem.msRequestFullscreen) {
    /* IE/Edge */
    elem.msRequestFullscreen()
  }
}

//退出全屏
const closeFullscreen = () => {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.mozCancelFullScreen) {
    /* Firefox */
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    /* Chrome, Safari and Opera */
    document.webkitExitFullscreen()
  } else if (document.msExitFullscreen) {
    /* IE/Edge */
    document.msExitFullscreen()
  }
}


onMounted(()=>{
//获取需要全屏展示的元素
  elem = document.querySelector('.big-screen-wrapper')

  //监听全屏变化  可不使用  通过document.fullscreenElement 判断是否有全屏元素 
   document.addEventListener('fullscreenchange', fullscreenchanged)

  FullScreen()
})

onUnmounted(() => {
 
  // document.removeEventListener('fullscreenchange', fullscreenchanged)
})

</script>

子组件：

  <div @click="controlScreen">
        <el-button>{{ isFullScreen }}</el-button>
      </div>

<script setup name="BigScreenHeader">

import { ref, reactive, onMounted, defineProps } from 'vue'

const props = defineProps({
  isFullScreen: {
    type: String,
    default: '',
  },

  controlScreen: {
    type: Function,
    default: () => {},
  },
})
/
</script>

效果：

全屏：

非全屏：