BizFullScreen 全屏切换

页面级或元素级（target CSS 选择器）进入/退出浏览器全屏（Fullscreen API），Esc 退出后状态自动同步回触发器；作用域插槽暴露 { isFullscreen, toggle, enter, exit } 支持完全自定义触发器。图表卡片放大、密集表格沉浸查看、审批附件全屏阅读。

页面级全屏

点击后整个页面进入浏览器全屏（Chrome 下按 F11 同效），再点一次或按 Esc 退出。

默认按钮触发，图标随状态切换。

<script setup lang="ts">
/** 场景：页面级全屏——默认按钮触发，Esc 退出后图标自动回切 */
import { BizFullScreen } from 'vue3-ep-biz-lib'
</script>

<template>
  <div>
    <BizFullScreen button-text="全屏阅读" />
    <p style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
      点击后整个页面进入浏览器全屏（Chrome 下按 F11 同效），再点一次或按 Esc 退出。
    </p>
  </div>
</template>

显示代码

元素级全屏

季度经营分析

全屏后该卡片独占屏幕，适合图表细读

target="#选择器" 只放大指定卡片，页面其余部分不动。

<script setup lang="ts">
/** 场景：元素级全屏——target 指定卡片放大沉浸查看，页面其余部分不动 */
import { BizFullScreen } from 'vue3-ep-biz-lib'
</script>

<template>
  <div>
    <div
      id="fs-demo-card"
      style="
        margin-top: 8px;
        padding: 24px;
        height: 200px;
        border: 1px solid var(--el-border-color);
        border-radius: 6px;
        background: var(--el-fill-color-lighter);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
      "
    >
      <div style="font-size: 18px; font-weight: 600">季度经营分析</div>
      <div style="color: var(--el-text-color-secondary)">全屏后该卡片独占屏幕，适合图表细读</div>
    </div>
    <div style="margin-top: 10px">
      <BizFullScreen target="#fs-demo-card" button-text="放大这张卡片" />
    </div>
  </div>
</template>

显示代码

自定义触发器

合同审阅区

作用域插槽拿到实时状态与三个控制函数。

<script setup lang="ts">
/** 场景：自定义触发器——作用域插槽拿到 isFullscreen 状态自由渲染 */
import { ElButton } from 'element-plus'
import { BizFullScreen } from 'vue3-ep-biz-lib'
</script>

<template>
  <div>
    <div
      id="fs-custom-card"
      style="
        margin-top: 8px;
        padding: 24px;
        height: 180px;
        border: 1px solid var(--el-border-color);
        border-radius: 6px;
        background: var(--el-fill-color-lighter);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 12px;
      "
    >
      <div style="font-size: 16px; font-weight: 600">合同审阅区</div>
      <BizFullScreen target="#fs-custom-card">
        <template #default="{ isFullscreen, toggle }">
          <ElButton :type="isFullscreen ? 'danger' : 'primary'" round @click="toggle">
            {{ isFullscreen ? '退出全屏' : '全屏审阅' }}
          </ElButton>
        </template>
      </BizFullScreen>
    </div>
  </div>
</template>

显示代码

表格沉浸查看

近期订单（30 条）

密集表格卡片全屏容纳更多行。

<script setup lang="ts">
/** 场景：表格沉浸查看——密集表格卡片全屏，容纳更多行 */
import { ElTable, ElTableColumn } from 'element-plus'
import { BizFullScreen } from 'vue3-ep-biz-lib'

const rows = Array.from({ length: 30 }, (_, i) => ({
  id: i + 1,
  order: `SO20260${(i % 9) + 1}1${String(i).padStart(3, '0')}`,
  amount: ((i + 1) * 137) % 9000,
  status: i % 3 === 0 ? '已发货' : i % 3 === 1 ? '待付款' : '已完成',
}))
</script>

<template>
  <div
    id="fs-table-card"
    style="border: 1px solid var(--el-border-color-lighter); border-radius: 6px; padding: 12px"
  >
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px">
      <span style="font-weight: 600">近期订单（30 条）</span>
      <BizFullScreen target="#fs-table-card" button-text="全屏查看" />
    </div>
    <ElTable :data="rows" border size="small" max-height="220">
      <ElTableColumn prop="id" label="#" width="52" />
      <ElTableColumn prop="order" label="订单号" />
      <ElTableColumn prop="amount" label="金额（元）" width="110" align="right" />
      <ElTableColumn prop="status" label="状态" width="90" />
    </ElTable>
  </div>
</template>

显示代码

仪表盘多卡片

GMV 趋势

¥ 2,340 万

环比 +12.5%

活跃用户

86,421

环比 +3.2%

多个图表卡片各自配置全屏按钮。

<script setup lang="ts">
/** 场景：仪表盘卡片全屏——多个图表卡片各自配一个全屏按钮 */
import { BizFullScreen } from 'vue3-ep-biz-lib'

const cards = [
  { id: 'fs-chart-1', title: 'GMV 趋势', value: '¥ 2,340 万', trend: '+12.5%' },
  { id: 'fs-chart-2', title: '活跃用户', value: '86,421', trend: '+3.2%' },
]
</script>

<template>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 720px">
    <div
      v-for="card in cards"
      :key="card.id"
      :id="card.id"
      style="
        padding: 20px;
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      "
    >
      <div style="display: flex; justify-content: space-between; align-items: center">
        <span style="font-weight: 600">{{ card.title }}</span>
        <BizFullScreen :target="`#${card.id}`" button-text="放大" />
      </div>
      <div style="font-size: 26px; font-weight: 700">{{ card.value }}</div>
      <div style="color: var(--el-color-success); font-size: 13px">环比 {{ card.trend }}</div>
      <div style="flex: 1; background: var(--el-fill-color-light); border-radius: 4px; min-height: 60px" />
    </div>
  </div>
</template>

显示代码

外部控制（expose）

当前：窗口模式

enter / exit / toggle 方法 + isFullscreen 响应式状态。

<script setup lang="ts">
/** 场景：外部控制——expose 的 enter / exit / toggle 与作用域插槽的实时状态 */
import { ref } from 'vue'
import { ElButton, ElTag } from 'element-plus'
import { BizFullScreen } from 'vue3-ep-biz-lib'
import type { BizFullScreenInstance } from 'vue3-ep-biz-lib'

const fsRef = ref<BizFullScreenInstance>()
</script>

<template>
  <div style="display: flex; gap: 10px; align-items: center">
    <BizFullScreen ref="fsRef">
      <template #default="{ isFullscreen, enter, exit }">
        <ElTag :type="isFullscreen ? 'danger' : 'info'">
          {{ isFullscreen ? '当前：全屏中' : '当前：窗口模式' }}
        </ElTag>
        <ElButton size="small" @click="enter">enter()</ElButton>
        <ElButton size="small" @click="exit">exit()</ElButton>
        <ElButton size="small" @click="fsRef?.toggle()">toggle()</ElButton>
      </template>
    </BizFullScreen>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
target	string	—	全屏目标 CSS 选择器；留空对整页全屏
button-text	string	''	默认触发按钮文案（使用默认插槽时忽略）
icon-size	number	14	图标字号

Slots

插槽名	作用域	说明
default	{ isFullscreen, toggle, enter, exit }	自定义触发器；不传渲染默认按钮（属性透传 el-button）

Expose

名称	类型	说明
isFullscreen	Ref<boolean>	当前全屏状态（响应式）
enter	() => Promise<void>	进入全屏
exit	() => Promise<void>	退出全屏
toggle	() => void	切换