Overlay 遮罩层

全端高阶全屏背景遮罩层组件，兼容微信小程序、H5 与 App。支持自定义遮罩颜色、毛玻璃雾化模糊 (blur)、点击遮罩自动关闭、嵌入居中加载/弹窗内容插槽，以及纯透明无背景遮罩模式。

---

代码示例

1. 基础用法 (Basic Overlay)

使用 v-model:show 控制遮罩层的显示与隐藏。轻触背景可触发关闭。

<template>
  <view>
    <mu-button type="primary" @click="show = true">显示遮罩层</mu-button>

    <mu-overlay v-model:show="show">
      <view class="card">
        <text>点击四周背景遮罩即可关闭</text>
        <mu-button type="primary" size="small" @click="show = false">知道了</mu-button>
      </view>
    </mu-overlay>
  </view>
</template>

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

const show = ref(false)
</script>

<style scoped>
.card {
  width: 540rpx;
  background: #ffffff;
  border-radius: 32rpx;
  padding: 40rpx;
  text-align: center;
}
</style>

---

2. 自定义高斯模糊 (Backdrop Blur)

通过 blur 属性设置毛玻璃模糊度（单位为 px，默认 12）。设为 0 可关闭毛玻璃效果。

<template>
  <!-- 20px 深度毛玻璃 -->
  <mu-overlay v-model:show="showDeepBlur" :blur="20" />

  <!-- 0px 无高斯模糊 -->
  <mu-overlay v-model:show="showNoBlur" :blur="0" />
</template>

---

3. 自定义遮罩色彩 (Custom Color)

通过 color 属性指定 RGBA 背景色调，打造特定主题蒙版。

<template>
  <!-- 绿色主题蒙版 -->
  <mu-overlay v-model:show="showGreen" color="rgba(16, 185, 129, 0.6)" />

  <!-- 红色警示蒙版 -->
  <mu-overlay v-model:show="showRed" color="rgba(244, 63, 94, 0.65)" />
</template>

---

4. 嵌套插槽内容 (Slot Content)

<mu-overlay> 默认采用 flex 居中对齐，可以直接在默认插槽中嵌入 Loading 加载面板、全屏弹窗或提示卡片。

<template>
  <mu-overlay v-model:show="showLoading" :closeable="false">
    <view class="loading-box">
      <mu-loading type="spinner" :size="36" color="#FFFFFF" />
      <text class="loading-text">加载中...</text>
    </view>
  </mu-overlay>
</template>

<style scoped>
.loading-box {
  background: rgba(15, 23, 42, 0.85);
  padding: 40rpx;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loading-text {
  color: #fff;
  margin-top: 16rpx;
  font-size: 26rpx;
}
</style>

---

5. 纯透明无背景遮罩 (Transparent Overlay)

设置 transparent 属性为 true 可彻底消除遮罩背景背景色与高斯模糊，仅保留透明点击响应层。

<template>
  <mu-overlay v-model:show="showTransparent" transparent>
    <view class="toast">纯透明遮罩内插槽</view>
  </mu-overlay>
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show / show	控制遮罩显隐	Boolean	true | false	false
zIndex	层级 z-index	Number | String	-	999
color	遮罩层背景颜色	String	-	'rgba(15, 23, 42, 0.55)'
blur	毛玻璃高斯模糊度 (px)	Number | String	-	12
transparent	完全透明遮罩（消除背景色与 blur）	Boolean	true | false	false
duration	动画过渡时长 (ms)	Number	-	300
closeable	点击遮罩层是否自动触发关闭	Boolean	true | false	true

---

事件说明 (Events)

事件名	说明	回调参数
click	点击遮罩层时触发	(event: MouseEvent)
close	遮罩层完全收起关闭时触发	-
update:show	v-model 语法糖显隐更新事件	(value: Boolean)

---

插槽说明 (Slots)

插槽名	说明
default	居中嵌套内容插槽（如 Loading、自定义面板）