mu-notify 顶部通知提醒组件

专为 UniApp 全端打造，支持 全局原生命名空间零 import 调用 (uni.$mu.notify)、全局事件调用 (uni.$emit) 与 组件实例 ref 调用。

---

💡 代码调用示例

方式 1：UniApp 全局命名空间零 import 调用（最推荐、最便捷）

无需 import 任何模块，可在任何页面、<script setup>、Pinia Store 或 request.js 中直接使用：

// 1. 成功通知 (顶部绿色流光)
uni.$mu.notify({ message: '预约成功', type: 'success' })

// 2. 警告通知 (顶部橙色流光)
uni.$mu.notify({ message: '您的账号未完成实名认证', type: 'warning' })

// 3. 错误通知 (顶部红色流光)
uni.$mu.notify({ message: '订单支付失败', type: 'error' })

---

方式 2：使用全局事件总线 uni.$emit（推荐）

在 request.js 等非页面 JS 文件中快捷弹出：

uni.$emit('mu-notify-show', {
  message: '系统维护通知：今晚 24 点将更新服务',
  type: 'primary',
  duration: 3000
})

---

方式 3：组件实例 ref 调用

<template>
  <view>
    <mu-button @click="handleNotify">显示顶部通知</mu-button>
    <mu-notify ref="notifyRef" />
  </view>
</template>

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

const notifyRef = ref(null)

function handleNotify() {
  notifyRef.value.show({
    message: '收到一条新消息',
    type: 'primary',
    duration: 2500
  })
}
</script>

---

⚙️ Options 参数说明

参数名	类型	默认值	可选值	说明
message	顶部通知的文本内容	String	''	-
type	通知主题风格	String	'primary'	primary | success | error | warning
duration	自动收起关闭的延时毫秒数	Number	3000	数字 (ms)
position	通知条展示位置	String	'top'	top | bottom
bgColor	自定义顶部背景颜色	String	''	-
background	同 bgColor，自定义背景颜色（兼容写法）	String	''	-
color	自定义通知文本颜色	String	'#ffffff'	-
onClose	通知关闭时的回调函数	Function	null	-

---

事件说明 (Events)

组件 ref 实例暴露以下事件：

事件名	说明	回调参数
update:show	v-model:show 双向绑定更新	(show: boolean)
open	通知条展开时触发	-
close	通知条收起时触发	-

---

实例方法 (Expose Methods)

方法名	说明
open(options)	以编程方式展示通知（等同于 uni.$mu.notify(options)）
close()	立即手动关闭当前通知条