Mural Plus

Popup 弹出层 ​

通用弹出层容器，支持居中缩放与上下左右四面滑入弹出，可配置遮罩、圆角、背景色、动画时长与层级。

小程序APPWeb
✓✓✓

实例 ​

以下按属性分别说明 mu-popup 的用法，可按需组合。

html
<template>
  <mu-button size="mini" type="primary" @click="showCenter = true">打开弹窗</mu-button>

  <mu-popup :show="showCenter" position="center" @close="showCenter = false">
    <view class="dialog">
      <text class="dialog-title">标题</text>
      <text class="dialog-desc">这是一个居中弹窗，默认淡入淡出。</text>
      <view class="dialog-actions">
        <mu-button size="mini" @click="showCenter = false">取消</mu-button>
        <mu-button size="mini" type="primary" @click="showCenter = false">确定</mu-button>
      </view>
    </view>
  </mu-popup>
</template>

弹出位置 ​

设置弹出方向，可选 center、top、right、bottom、left，默认为居中显示。

html
<mu-popup :show="showTop" position="top" @close="showTop = false">
  <view class="topbar"><text class="topbar-title">顶部弹出</text></view>
</mu-popup>

<mu-popup :show="showRight" position="right" @close="showRight = false">
  <view class="drawer"><text class="drawer-title">侧边菜单</text></view>
</mu-popup>

<mu-popup :show="showBottom" position="bottom" @close="showBottom = false">
  <view class="sheet"><text class="sheet-title">底部弹出</text></view>
</mu-popup>

<mu-popup :show="showLeft" position="left" @close="showLeft = false">
  <view class="drawer"><text class="drawer-title">侧边菜单</text></view>
</mu-popup>

遮罩 ​

控制是否渲染遮罩层，设为 false 时只显示面板内容。

html
<mu-popup :show="showPlain" position="center" :mask="false" @close="showPlain = false">
  <view class="dialog"><text class="dialog-desc">未启用遮罩层，仅显示弹窗内容。</text></view>
</mu-popup>

点击遮罩关闭 ​

控制点击遮罩是否触发 close，设为 false 后只能通过面板内按钮关闭。

html
<mu-popup :show="showLock" position="center" :close-on-click-mask="false" @close="showLock = false">
  <view class="dialog"><text class="dialog-desc">点击遮罩不会关闭，只能通过按钮关闭。</text></view>
</mu-popup>

圆角 ​

设置面板圆角，按弹出方向作用于对应的边角。

html
<mu-popup :show="showSquare" position="bottom" radius="32rpx" @close="showSquare = false">
  <view class="sheet"><text class="sheet-title">圆角弹层</text></view>
</mu-popup>

面板背景 ​

设置面板背景色，可使用主题变量或任意合法颜色。

html
<mu-popup :show="showBg" position="center" background="var(--mu-active-color)" @close="showBg = false">
  <view class="dialog"><text class="dialog-desc">通过 background 设置面板背景色</text></view>
</mu-popup>

动画时长 ​

设置弹出与关闭动画的时长，单位为毫秒。

html
<mu-popup :show="showSlow" position="left" :duration="800" @close="showSlow = false">
  <view class="drawer"><text class="drawer-title">慢速动画</text></view>
</mu-popup>

遮罩背景 ​

设置遮罩层的背景色。

html
<mu-popup :show="showMaskBg" position="center" mask-background="rgba(76, 118, 255, 0.4)" @close="showMaskBg = false">
  <view class="dialog"><text class="dialog-desc">通过 mask-background 修改遮罩颜色</text></view>
</mu-popup>

属性 ​

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称说明类型默认值
show是否显示弹出层booleanfalse
position弹出位置，可选 center、top、bottom、left、rightstringcenter
radius面板圆角，按弹出方向设置对应圆角string0rpx
background面板背景色stringvar(--mu-color-white, #FFFFFF)
mask是否显示遮罩层booleantrue
maskBackground遮罩背景色stringrgba(0, 0, 0, 0.6)
closeOnClickMask点击遮罩是否关闭booleantrue
duration弹出/关闭动画时长（ms）number300
zIndex层级number999
customClass自定义根节点类名string-
customStyle自定义根节点样式any-

事件 ​

组件支持以下事件。

事件名说明回调参数
close点击遮罩（closeOnClickMask 为 true）时触发，一般用于关闭event: UniEvent
click点击面板内容时触发event: UniEvent

插槽 ​

组件支持以下插槽。

名称说明
default面板内容

注意事项 ​

  • 平台差异：App、小程序、Web 表现一致。
  • 使用注意：显隐由 show 属性控制，组件不会自行关闭，点击遮罩触发 close 后需自行把 show 置为 false。
  • 使用注意：点击遮罩仅在 close-on-click-mask 为 true 时触发 close；点击面板内容触发的是 click，不会关闭弹层。
  • 使用注意：mask 为 false 时不渲染遮罩层，只能通过外部控制 show 关闭。