全屏功能

基本使用

全屏

退出全屏

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue'
import { toFullScreen,exitFullscreen } from 'vue-hkp-ui'


toFullScreen() //全屏
exitFullscreen() //退出全屏

</script>

内部方法

<script setup lang="ts">
// 全屏
export const toFullScreen=()=>{
  let el= document.documentElement;
  if (el.requestFullscreen) {  
    el.requestFullscreen().catch((err) => {  
        alert("请求全屏时出错: " + err.message);  
    });  
  } else {  
      alert("当前浏览器不支持全屏功能");  
  }
}

// 退出全屏
export const exitFullscreen=()=>{
  let el= document;
  if (el.exitFullscreen) {  
    el.exitFullscreen().catch((err) => {  
        alert("退出全屏时出错: " + err.message);  
    });  
  } else {  
      alert("当前浏览器不支持退出全屏功能");  
  }
}
</script>