FullScreenContainer 全屏容器

用于大屏页面展示，对浏览器缩放进行了处理，在全屏展示时始终保持初始的展示效果。

基础用法

直接包裹大屏页面

<script setup lang="ts">
import { ref } from 'vue'

const fullScreenContainer = ref()
</script>

<template>
  <x-fullScreenContainer
    ref="fullScreenContainer"
    style="background-color: #fff"
  >
    <template #default="{ enter, exit }">
      <button @click="fullScreenContainer?.enter">全屏</button>
      <button @click="fullScreenContainer?.exit">退出全屏</button>
      <button @click="enter">全屏（插槽）</button>
      <button @click="exit">退出全屏（插槽）</button>
    </template>
  </x-fullScreenContainer>
</template>

FullScreenContainer API

Slots

Name	Description	Type
default	默认插槽, 页面内容	{isFullscreen: Ref<boolean>;enter: () => void;exit: () => void;scaleValue: Ref<number>;}

Expose

Name	Description	Type
isFullscreen	是否全屏	Ref<boolean>
enter	全屏	() => void
exit	退出全屏	() => void
scaleValue	容器缩放值（某些组件库在外层容器缩放后导致弹出气泡位置不准，用此值去修正样式）	Ref<number>