Modal 对话框

弹出式模态对话框控件，用于重要的信息确认、操作二次警告以及交互告知，支持高定黑金配色、按钮颜色定制与自由插槽。

---

代码示例

1. 基础确认对话框 (Basic Modal)

<template>
  <view>
    <mu-button type="primary" @click="show = true">打开对话框</mu-button>
    
    <mu-modal
      v-model:show="show"
      title="操作确认"
      content="您确定要保存当前修改并同步至服务器吗？"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </view>
</template>

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

const show = ref(false)
const onConfirm = () => console.log('确认')
const onCancel = () => console.log('取消')
</script>

---

2. 危险操作确认 (Danger Action Modal)

设置 confirm-color="#F43F5E" 可实现高亮红色警示按钮。

<template>
  <mu-modal
    v-model:show="show"
    title="彻底删除项目"
    content="项目删除后将无法恢复，所有数据将被清空！"
    confirm-text="彻底删除"
    confirm-color="#F43F5E"
    @confirm="onDangerConfirm"
  />
</template>

---

3. 自由插槽自定义 (Custom Content Slot)

通过默认插槽可以自由渲染图片、动画或自定义表单项。

<template>
  <mu-modal v-model:show="show" title="提交成功">
    <view class="custom-content">
      <mu-icon name="check-circle" :size="48" color="#10B981" />
      <text class="title">认证通过！</text>
    </view>
  </mu-modal>
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
v-model:show / show	是否显示对话框	Boolean	true | false	false
title	对话框标题	String	-	''
content	对话框正文提示文本	String	-	''
showCancel	是否显示取消按鈕	Boolean	true | false	true
showConfirm	是否显示确认按鈕	Boolean	true | false	true
showFooter	是否显示底部按鈕行（可用于仅展示信息模式）	Boolean	true | false	true
cancelText	取消按鈕文案	String	-	'取消'
confirmText	确认按鈕文案	String	-	'确定'
cancelColor	取消按鈕颜色	String	-	''
confirmColor	确认按鈕颜色	String	-	''
mask	是否显示全屏遗罩	Boolean	true | false	true
maskClosable	点击遗罩层是否自动关闭	Boolean	true | false	false
closable	是否显示右上角关闭图标	Boolean	true | false	false
size	对话框宽度尺寸	String	small | medium | large	'medium'

---

插槽说明 (Slots)

插槽名	说明
default	完全自定义对话框中间内容 Body 节点

---

事件说明 (Events)

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
confirm	点击确认按鈕时触发	-
cancel	点击取消按鈕时触发	-
close	对话框关闭时触发（包括确认、取消、关闭遗罩）	-

---

实例方法 (Expose Methods)

方法名	说明
open()	呼广展开对话框
close()	关闭对话框