super_video/src/components/Overlay/README.md

Overlay 组件

遮罩层组件，支持多层嵌套。

基本用法

<template>
  <Overlay :visible="showModal" @close="showModal = false">
    <div>内容</div>
  </Overlay>
</template>

多层嵌套

组件支持多层嵌套，会自动管理 z-index 层级：

<template>
  <!-- 第一层 Overlay -->
  <Overlay :visible="showFirstModal" @close="showFirstModal = false">
    <div>
      <h2>第一层弹窗</h2>
      <button @click="showSecondModal = true">打开第二层</button>

      <!-- 第二层 Overlay -->
      <Overlay :visible="showSecondModal" @close="showSecondModal = false">
        <div>
          <h2>第二层弹窗</h2>
          <button @click="showThirdModal = true">打开第三层</button>

          <!-- 第三层 Overlay -->
          <Overlay :visible="showThirdModal" @close="showThirdModal = false">
            <div>
              <h2>第三层弹窗</h2>
              <p>这是最顶层的弹窗</p>
            </div>
          </Overlay>
        </div>
      </Overlay>
    </div>
  </Overlay>
</template>

<script setup>
import { ref } from 'vue'

const showFirstModal = ref(false)
const showSecondModal = ref(false)
const showThirdModal = ref(false)
</script>

手动指定层级

如果需要手动控制层级，可以使用 level 或 zIndex 属性：

<template>
  <!-- 手动指定层级 -->
  <Overlay :visible="showModal" :level="5" @close="showModal = false">
    <div>内容</div>
  </Overlay>

  <!-- 或者直接指定 z-index -->
  <Overlay :visible="showModal" :z-index="2000" @close="showModal = false">
    <div>内容</div>
  </Overlay>
</template>

属性说明

属性	类型	默认值	说明
visible	boolean	false	是否显示遮罩
background	string	'rgba(0, 0, 0, 0.5)'	遮罩背景色
zIndex	number	undefined	手动指定 z-index
level	number	0	嵌套层级，用于自动计算 z-index
baseZIndex	number	1000	基础 z-index 值
clickable	boolean	true	是否可点击遮罩关闭
animation	string	'fade'	动画类型
duration	number	300	动画持续时间

层级计算规则

• 如果没有手动指定 zIndex，组件会根据 level 自动计算：
  • 计算公式：baseZIndex + level * 10
  • 例如：baseZIndex=1000, level=1 → z-index=1010
• 嵌套时，子组件的 level 会自动递增
• 手动指定 zIndex 时，会忽略自动计算