FlipOverlay 翻转遮罩

从触发源翻转展开的 3D Overlay，适合卡片详情、图片预览与过渡式页面。

基础用法

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

const open = ref(false)
const triggerRef = ref()
</script>

<template>
  <TxButton ref="triggerRef" @click="open = true">打开 Overlay</TxButton>
  <TxFlipOverlay
    v-model="open"
    :source="triggerRef?.$el"
    header-title="详情视图"
    header-desc="内置头部支持标题、副标题与默认圆形关闭按钮"
  >
    <template #default="{ close }">
      <div style="padding: 32px;">
        <p style="margin: 0 0 16px;">内容从触发源翻转展开。</p>
        <TxButton size="sm" @click="close">关闭</TxButton>
      </div>
    </template>
  </TxFlipOverlay>
</template>

设计要点

• source 决定动画起点，可传 HTMLElement 或 DOMRect。
• rotateX / rotateY 与 perspective 控制 3D 质感。
• Header 渲染优先级：
  1. 提供 #header 时，完全覆盖内置 header。
  2. 未提供 #header 且 header=false 时，不渲染 header。
  3. 未提供 #header 且 header=true 时，使用内置 header（支持 #header-display / #header-actions / #header-close）。
• closable=false 会完全隐藏右上角 close 区（#header-close 也不会渲染）。
• 卡片默认内置 surface 背景层（基于 TxBaseSurface），可通过 surface / surfaceColor / surfaceOpacity 调整。
• globalMask 控制全局遮罩层，默认开启。
• border 控制边框样式（solid / dashed / none，dash 等价于 dashed）。
• randomTilt 可为每次打开添加轻微随机偏移。
• maskClosable=false 时遮罩点击不会关闭，可通过 close() 控制关闭。
• 连续打开多个 overlay 时，背景遮罩由单例全局层统一渲染并下沉到所有卡片下方；仅顶层保留可交互点击层，下层交互层不可交互且不会遮挡下层卡片露边。
• 叠层位移仅在相邻层尺寸接近时自动启用（宽高分别满足 |delta| <= max(8px, 上一层尺寸 * 5%)）。
• 位移叠层最多强化 3 层（-18/-36/-54px + 0.95/0.90/0.85 缩放），超过 3 层后按层级渐隐（1.00 → 0.92 → 0.78 → 0.62 → 0.38 → 0.16 → 0）。
• preventAccidentalClose=true 可开启防误关闭模式：遮罩点击不关闭、监听页面退出（刷新/关闭）并拦截，误操作时卡片周围会出现红色警示光。
• 通过 open/opened/close/closed 事件联动外围 UI。

API

Props

Events

Slots