zhangqi
/
swOperation


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
							<template>
  <div>
     <fullscreen-outlined v-if="!fullscreen" @click="enterFullscreen"/>
     <fullscreen-exit-outlined v-else @click="exitFullscreen"/>
  </div>
</template>

<script setup>
  import { FullscreenOutlined,FullscreenExitOutlined  } from '@ant-design/icons-vue';
  import {ref,defineProps,onMounted,watch} from 'vue'
  import { storeToRefs } from 'pinia'
  import { useBaseStore } from '@/stores/modules/base'
  const base = useBaseStore()
  let { fullscreen } = storeToRefs(base)
  const props = defineProps(['domId'])
  const enterFullscreen = () => {
     /* 获取(<html>)元素以全屏显示页面 */
    const full = document.getElementById(props.domId)
    if (full.RequestFullScreen) {
        full.RequestFullScreen()
        //兼容Firefox
    } else if (full.mozRequestFullScreen) {
        full.mozRequestFullScreen()
        //兼容Chrome, Safari and Opera等
    } else if (full.webkitRequestFullScreen) {
        full.webkitRequestFullScreen()
        //兼容IE/Edge
    } else if (full.msRequestFullscreen) {
        full.msRequestFullscreen()
    }
  }
  const exitFullscreen = ()=>{
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
  }
  const handleFullscreenChange = ()=> {
    if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
      // 全屏模式激活
      console.log('全屏模式已激活');
      fullscreen.value = true
    } else {
      // 全屏模式退出
      fullscreen.value = false
      console.log('全屏模式已退出');
    }
  }
  onMounted(()=>{
    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
    document.addEventListener('MSFullscreenChange',handleFullscreenChange)
  })
</script>
<style>
</style>