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

代码如下：

<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.