Popup 弹出层

全端高阶基础遮罩弹出层组件，支持 top / bottom / left / right / center 五向弹出方向，支持极奢 Squircle 软圆角、毛玻璃遮罩、自定义关闭按钮、沉浸式活动营销海报弹窗以及纯透明无背景无模糊图片海报弹窗。

代码示例

1. 五向弹出 (Position)

通过配置 position 属性定义弹出方向。

vue

<template>
  <view class="demo-box">
    <mu-button type="primary" @click="showBottom = true">底部弹出</mu-button>
    <mu-button type="info" @click="showCenter = true">居中弹窗</mu-button>
    <mu-button type="success" @click="showTop = true">顶部下拉</mu-button>

    <!-- 底部弹出层 -->
    <mu-popup v-model:show="showBottom" position="bottom" round closable>
      <view style="padding: 40rpx; text-align: center;">
        <text style="font-weight: bold;">底部面板内容</text>
      </view>
    </mu-popup>

    <!-- 居中弹窗 -->
    <mu-popup v-model:show="showCenter" position="center" round closable width="600rpx">
      <view style="padding: 40rpx; text-align: center;">
        <text>居中提示对话框内容</text>
      </view>
    </mu-popup>

    <!-- 顶部下拉 -->
    <mu-popup v-model:show="showTop" position="top">
      <view style="padding: 30rpx; background: #171717; color: #fff; text-align: center;">
        顶部通知横幅提醒
      </view>
    </mu-popup>
  </view>
</template>

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

const showBottom = ref(false)
const showCenter = ref(false)
const showTop = ref(false)
</script>

2. 关闭按钮形态 (Closable & Close Position)

通过 closable 控制是否显示内置关闭图标，并由 close-position 指定按键位置。

top-right（默认）：右上角轻量关闭按键
top-left：左上角关闭按键
bottom：底部挂载式圆形模糊关闭按键（活动海报卡片推荐）

vue

<template>
  <!-- 带右上角关闭按键 -->
  <mu-popup v-model:show="showClose" position="center" round closable close-position="top-right" width="620rpx">
    <view class="box">
      <text class="title">安全验证</text>
      <text class="desc">请确认是否授权该数据导出操作。</text>
    </view>
  </mu-popup>
</template>

3. 带遮罩黑影的海报弹窗 (Transparent & Bottom Close)

设置 transparent 为 true 移除卡片白底背景与阴影，配合 close-position="bottom" 快速打造运营营销海报浮层。

vue

<template>
  <mu-popup v-model:show="showPoster" position="center" transparent closable close-position="bottom">
    <view class="poster-card">
      <view class="badge">限时活动</view>
      <text class="poster-title">Muzhiyu UI 极奢版</text>
      <mu-button type="primary" block radius="full" @click="showPoster = false">立即领取</mu-button>
    </view>
  </mu-popup>
</template>

4. 纯透明无背景无模糊图片海报弹窗 (Pure Image Poster & No Blur)

同时设置 transparent + :blur="false" + mask-color="transparent"，用于展示高清促销海报、自定义设计图形或运营红包大图。彻底消除任何背景遮罩黑影与高斯模糊。

vue

<template>
  <mu-popup
    v-model:show="showImagePoster"
    position="center"
    transparent
    :blur="false"
    mask-color="transparent"
    closable
    close-position="bottom"
  >
    <!-- 纯透明插槽：直接放入带有美术设计的海报图片 -->
    <view class="poster-img-box">
      <image src="https://picsum.photos/560/720?random=88" mode="widthFix" class="poster-img" />
    </view>
  </mu-popup>
</template>

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

const showImagePoster = ref(false)
</script>

<style scoped>
.poster-img-box {
  width: 560rpx;
  border-radius: 36rpx;
  overflow: hidden;
}
.poster-img {
  width: 100%;
  display: block;
}
</style>

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show / show	控制弹出层显隐	`Boolean`	`true` \| `false`	`false`
position	弹出方向位置	`String`	`top` \| `bottom` \| `left` \| `right` \| `center`	`'center'`
mask	是否显示背景遮罩层	`Boolean`	`true` \| `false`	`true`
maskClosable	点击遮罩层是否自动关闭	`Boolean`	`true` \| `false`	`true`
maskColor	自定义遮罩层背景色（设为 `'transparent'` 可清除黑影）	`String`	-	`''` (默认使用黑金暗色遮罩)
blur	是否开启遮罩层高斯模糊 (backdrop-filter)	`Boolean`	`true` \| `false`	`true`
round	是否开启圆角卡片样式	`Boolean`	`true` \| `false`	`false`
closable	是否开启内置关闭图标按钮	`Boolean`	`true` \| `false`	`false`
closePosition	关闭按钮放置位置	`String`	`top-right` \| `top-left` \| `bottom`	`'top-right'`
transparent	是否透明背景（内容区域无背景/无阴影，专用于图片/自定义卡片）	`Boolean`	`true` \| `false`	`false`
background	自定义弹窗主体背景色	`String`	-	`''`
width	弹出层宽度	`String`	-	`''`
height	弹出层高度	`String`	-	`''`
zIndex	层级 z-index	`Number` \| `String`	-	`1000`
duration	动画过渡时长 (毫秒)	`Number`	-	`300`

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	`(show: boolean)`
open	弹出层完全展开动画播放完毕时触发	-
close	弹出层完全收起收回时触发	-

实例方法 (Expose Methods)

获取组件 ref 实例后可直接调用以下公开方法：

方法名	说明
open()	唤醒并展开弹出层
close()	关闭收起弹出层

Popup 弹出层 ​

代码示例 ​

1. 五向弹出 (Position) ​

2. 关闭按钮形态 (Closable & Close Position) ​

3. 带遮罩黑影的海报弹窗 (Transparent & Bottom Close) ​

4. 纯透明无背景无模糊图片海报弹窗 (Pure Image Poster & No Blur) ​

API 属性说明 (Props) ​

事件说明 (Events) ​

实例方法 (Expose Methods) ​