uniProject/components/MTAMpHtml/MtaMpHtml.vue

<template>
  <mp-html @fullscreenchange="handleFullscreen" :content="props.content" />
</template>

<script setup>
import {
  ref,
  onMounted,
  onUnmounted
} from "vue";
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'

const isFullscreen = ref(false)
const props = defineProps({
  content: {
    type: String,
    default: ''
  }
})

onMounted(() => {
  // 监听全屏变化
  document.addEventListener('fullscreenchange', handleFullscreenChange)
  document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
})
function handleFullscreen(e) {
  // 处理全屏事件
  isFullscreen.value = e.detail.fullscreen
}

function handleFullscreenChange() {
  // 检查当前是否处于全屏状态
  const fullscreenElement = document.fullscreenElement ||
      document.webkitFullscreenElement
  if (!fullscreenElement) {
    // 如果退出全屏
    isFullscreen.value = false
  }
}

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
  document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
})
</script>