可视化大屏实现全屏或非全屏

通过点击按钮实现全屏和非全屏效果展示

代码如下：

<template>
//点击icon图片进入全屏或非全屏<img :src="screenStatus ? '/src/assets/noFull.png' : '/src/assets/full.png'" alt="" @click="enterFullScreen"  />
</template><script setup lang="ts">
import { ref } from "vue";
// 默认小屏
const screenStatus = ref(false);
const enterFullScreen = () => {let element = document.documentElement;screenStatus.value = document.fullscreenElement === null ? false : true;if (screenStatus.value) {if (document.exitFullscreen) {document.exitFullscreen();}} else {if (element.requestFullscreen) {element.requestFullscreen();}}screenStatus.value = !screenStatus.value;
};
</script>

A winner is a dreamer who never gives up.