xtf-notify

组件说明

xtf-notify 是固定定位的消息通知组件，适用于提交反馈、系统提示和营销提醒。支持声明式 items 列表及通过 notifyManager 跨层级调用的 service 模式。

基础用法

1. 声明式通知

<template><xtf-notify :items="items" variant="soft" @close="close" /></template>
<script>
export default {
  data() {
    return { items: [{ id: 'saved', type: 'success', title: '保存成功', message: '资料已更新' }] }
  },
  methods: {
    close(id) {
      this.items = this.items.filter((item) => item.id !== id)
      console.log(id)
    }
  }
}
</script>

2. 操作、点击与进度

<template>
  <xtf-notify :items="items" show-progress @action="action" @click-item="click" />
</template>
<script>
export default {
  data() {
    return {
      items: [
        {
          id: 'upgrade',
          type: 'info',
          title: '发现新版本',
          message: '建议立即升级',
          actionText: '升级',
          duration: 5000
        }
      ]
    }
  },
  methods: {
    action(item) {
      uni.showToast({ title: item.actionText, icon: 'none' })
    },
    click(item) {
      console.log('点击通知', item.id)
    }
  }
}
</script>

3. Service 命令式调用

<template>
  <view><xtf-notify service /><xtf-button label="发送通知" @click="show" /></view>
</template>
<script>
import { notifyManager } from '@/uni_modules/xtf-linkui/libs/notify/notify-manager'
export default {
  methods: {
    show() {
      notifyManager.success({
        title: '提交成功',
        message: '订单将在 3 个工作日内处理',
        actionText: '查看',
        onAction(item) {
          console.log(item.id)
        }
      })
      uni.showToast({ title: '通知已发送', icon: 'none' })
    }
  }
}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | service | Boolean | false | 从 notifyManager 读取通知并激活宿主 | 全局通知 | | items | Array | [] | 声明式通知数据 | 局部通知 | | top | String \| Number | 24 | 顶部基准偏移 rpx | 顶部通知 | | variant | String | 'solid' | solid/glass/soft/outline | 视觉风格 | | shape | String | 'rounded' | rounded/pill/tile | 外形 | | placement | String | 'top' | top/bottom | 显示位置 | | align | String | 'left' | left/center | 内容对齐 | | gap | String \| Number | 24 | 多条通知间距 rpx | 堆叠显示 | | maxWidth | String \| Number | 0 | 最大宽度，0 不限制 | 宽屏布局 | | showIcon/showProgress | Boolean | true/false | 显示类型图标/倒计时进度 | 内容显示 | | zIndex | String \| Number | '' | 容器层级，空值回退配置或 2000 | 浮层遮盖 |

items 每项支持的字段

字段	类型	默认值	说明
id	String | Number	索引生成值	通知标识
type	String	'info'	success/warning/danger/info/primary/neutral/promo
variant/shape/placement/align	String	继承组件	覆盖组件默认展示
title/message/text/description	String	''	标题、正文（text 是别名）、补充文本
icon	String	''	自定义图标名
showIcon/showProgress	Boolean	继承组件	覆盖显示开关
accentColor	String	''	自定义强调色
actionText/actionTheme	String	''	操作按钮文字和主题
onAction/onClick	Function	null	(item: Object) => void 的项目内回调
duration	Number	未声明式自动关闭	service 默认 3000 ms；组件仅给 service 项创建定时器
closeable	Boolean	true	是否显示关闭按钮
offset	Number	0	额外位置偏移 rpx

---

事件

事件名称	触发时机	回调参数	参数说明
close	非 service 模式点击关闭	(id: String | Number)	通知标识，调用方移除对应 item
action	点击操作按钮	(item: Object)	标准化后的通知项
click-item	点击通知主体	(item: Object)	标准化后的通知项

---

插槽

插槽名	作用	作用域参数	说明
无	-	-	组件未提供插槽

---

方法

xtf-notify 不暴露实例方法；service 模式配套 notifyManager 如下。

1. notifyManager.show(options) - 显示通知

接收 items 单项字段，返回创建的 Object；宿主需先挂载 <xtf-notify service />。示例见“Service 命令式调用”。

2. notifyManager.success(options)/warning(options)/danger(options)/info(options)/primary(options)/neutral(options)/promo(options) - 快捷类型通知

接收 Object | String，返回通知对象；分别固定对应 type，promo 同时默认 soft。

3. notifyManager.remove(id) - 删除指定通知

接收 String | Number 标识，无返回值。示例：notifyManager.remove(id)。

4. notifyManager.clear() - 清空通知

无参数，无返回值。示例：notifyManager.clear()。

5. notifyManager.getState() - 获取状态

无参数，返回 { items: Array, activeHostId: String }。示例：console.log(notifyManager.getState())。

6. notifyManager.subscribe(listener) - 订阅状态

参数 (state: Object) => void，返回取消订阅函数。示例：const off = notifyManager.subscribe(state => console.log(state.items)); off()。

7. notifyManager.activateHost(hostId)/deactivateHost(hostId) - 切换宿主

接收 hostId: String，返回当前状态；正常由 xtf-notify service 生命周期自动调用。

主题说明

• 强调色、浅色背景、边框分别使用 --xtf-notify-accent、--xtf-notify-soft、--xtf-notify-border。
• 最大宽度使用运行时注入的 --xtf-notify-max-width。
• solid 使用强调色，glass 使用毛玻璃，soft 使用浅色语义背景，outline 使用强调色边框。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。