Modal 模态框

基于 mu-popup 的对话框组件，支持居中对话框与底部弹出、标题图标、确认/取消按钮、自定义内容插槽与遮罩行为。

小程序	APP	Web
✓	✓	✓

实例

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

<template>
  <mu-modal :show="show" position="center" title="提示" content="确定要提交本次内容吗？"
    :show-confirm="true" @confirm="onConfirm" @close="show = false"></mu-modal>
</template>

只显示取消按钮

showConfirm 默认为 false，不开启时对话框中只有取消按钮。

<mu-modal :show="show" position="center" title="提示" content="该提示仅提供取消按钮。"
  @close="show = false"></mu-modal>

按钮文字

通过 confirmText 设置确定按钮文字；position 默认为 bottom，未指定时对话框从底部弹出。

<mu-modal :show="show" title="温馨提示" :show-confirm="true" confirm-text="我知道了"
  content="为保障你的账号安全，请勿向他人透露验证码。" @confirm="onConfirm" @close="show = false"></mu-modal>

按钮样式

设置取消与确定按钮的文字、取消按钮文字颜色与确定按钮背景色。

<mu-modal :show="show" position="center" title="自定义按钮" content="自定义按钮文案与颜色。"
  cancel-text="返回" confirm-text="好的" cancel-color="var(--mu-text-secondary-color)"
  confirm-color="var(--mu-color-success)" :show-confirm="true"
  @confirm="onConfirm" @cancel="onCancel" @close="show = false"></mu-modal>

自定义内容

通过默认插槽替换 content 文字，可放置任意组件。

<mu-modal :show="show" position="center" title="自定义内容" :show-confirm="true"
  @confirm="onConfirm" @close="show = false">
  <view class="modal-body">
    <text>这里是通过默认插槽自定义的内容区域，可放置任意组件。</text>
  </view>
</mu-modal>

点击遮罩关闭

控制点击遮罩是否关闭对话框，设为 false 后只能通过按钮关闭。

<mu-modal :show="show" position="center" title="点击遮罩不关闭" content="试试点击遮罩区域。"
  :show-confirm="true" :close-on-click-mask="false" @confirm="onConfirm" @close="show = false"></mu-modal>

标题图标

设置标题左侧的图标名称，取值为图标列表中的名称。

<mu-modal :show="show" position="center" icon="info-circle" title="提示" content="标题左侧显示对应图标。"
  :show-confirm="true" @confirm="onConfirm" @close="show = false"></mu-modal>

显示图标

控制标题图标是否显示，默认为显示。

<mu-modal :show="show2" position="center" icon="info-circle" :show-icon="false" title="提示"
  content="showIcon 为 false 时图标不显示。" @close="show2 = false"></mu-modal>

宽度

设置对话框宽度，为空时居中弹窗默认 560rpx。

<mu-modal :show="show" position="center" title="自定义宽度" content="width 与 radius 可自定义。"
  width="640rpx" :show-confirm="true" @confirm="onConfirm" @close="show = false"></mu-modal>

圆角

设置对话框圆角，为空时居中和底部弹出默认 28rpx。

<mu-modal :show="show" position="center" title="自定义宽度" content="width 与 radius 可自定义。"
  radius="24rpx" :show-confirm="true" @confirm="onConfirm" @close="show = false"></mu-modal>

属性

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

属性名称	说明	类型	默认值
show	是否显示	boolean	false
position	弹出位置，可选 center、bottom	string	bottom
title	标题文字	string	-
content	内容文字	string	-
icon	标题左侧图标名称	string	-
showIcon	是否显示标题图标	boolean	true
iconSize	标题图标尺寸	number	40
iconColor	标题图标颜色	string	var(--mu-modal-icon-color, var(--mu-color-primary, #4C76FF))
showConfirm	是否显示确定按钮	boolean	false
cancelText	取消按钮文字	string	取消
confirmText	确定按钮文字	string	确定
cancelColor	取消按钮文字颜色	string	var(--mu-modal-cancel-color, var(--mu-text-secondary-color, #6B7280))
confirmColor	确定按钮背景色	string	var(--mu-color-primary, #4C76FF)
width	对话框宽度，为空时居中弹窗默认 560rpx	string	-
radius	对话框圆角，为空时 center/bottom 默认 28rpx	string	-
mask	是否显示遮罩	boolean	true
maskBackground	遮罩背景色	string	rgba(0, 0, 0, 0.6)
closeOnClickMask	点击遮罩是否关闭	boolean	true
duration	过渡动画时长（ms）	number	300
zIndex	层级	number	999
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	string	-

事件

组件支持以下事件。

事件名	说明	回调参数
confirm	点击确定按钮时触发	-
cancel	点击取消按钮时触发	-
close	关闭时触发（点击取消、遮罩或弹窗关闭）	event: UniEvent

插槽

组件支持以下插槽。

名称	说明
default	自定义内容区域，显示在 content 文字下方

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：组件为受控模式，需通过 :show 控制显示，并在 @close 中把 show 置为 false。
• 使用注意：点击确定按钮只触发 confirm，不会自动关闭，需自行在 @confirm 中关闭。
• 使用注意：默认只有取消按钮（showConfirm 为 false），需要确定按钮时须显式开启。