Notify 消息通知

介绍

在页面顶部/底部展示消息通知。

函数调用

为了便于使用 Notify，提供了 showNotify、closeNotify 函数，用于显示和关闭 Notify，可设置标识指定一个 Notify 组件调用。

WARNING

因小程序无法动态挂载组件，使用时需要页面存在一个 Notify 组件。

<vd-notify name="page" />

import { showNotify } from 'vital-design';

showNotify('提示内容');

// 指定一个 Notify 调用
showNotify({ name: 'page', message: '提示内容' });

基础用法

通过设置 type 属性来设置提示类型，默认为 default。

<vd-notify name="page" />

import { showNotify } from 'vital-design';

showNotify({ name: 'page', message: '文字提示' });
showNotify({ name: 'page', type: 'default', message: '默认提示' });
showNotify({ name: 'page', type: 'primary', message: '主要提示' });
showNotify({ name: 'page', type: 'success', message: '成功提示' });
showNotify({ name: 'page', type: 'warning', message: '警告提示' });
showNotify({ name: 'page', type: 'error', message: '失败提示' });

弹出位置

通过设置 position 属性来设置弹出位置，默认为 top。

<vd-notify name="page" position="bottom" />

import { showNotify } from 'vital-design';

showNotify({ name: 'page', message: '文字提示' });

关闭按钮

通过设置 closeable 属性来设置是否显示关闭按钮，默认为 false。

<vd-notify name="page" />

import { showNotify } from 'vital-design';

showNotify({ name: 'page', message: '文字提示', closeable: true });

// 不自动关闭通知
showNotify({ name: 'page', message: '文字提示', closeable: true, duration: 0 });

文案合并

通过设置 grouping 属性，相同文案且相同类型的通知会合并为一条，并在右侧展示合并次数徽标。

<vd-notify name="page" grouping />

import { showNotify } from 'vital-design';

// 同 message + type 才会合并计数
showNotify({ name: 'page', type: 'primary', message: '相同文案会合并计数' });
showNotify({ name: 'page', type: 'primary', message: '相同文案会合并计数' });

单例使用

通过布尔 v-model 控制一条声明式通知（与命令式队列共用容器，内部仍用列表管理）。内容 props 变化时会更新该条，而不会重复插入。

也可通过 ref 调用 open / close。需要完全自定义单条 UI 时，优先用下方的 notify-item。

<vd-notify v-model="show" message="测试通知消息" type="primary" />
<vd-notify ref="notifyRef" />

const show = ref(false);
const notifyRef = shallowRef();

notifyRef.value.open({ type: 'primary', message: '测试通知消息' });

单通知项使用

你可直接使用 notify-item 组件来显示一个通知项。

<vd-notify-item v-model="show" message="测试通知消息" type="primary" closeable />

const show = ref(false);

API

Notify Props

参数	说明	类型	默认值
v-model	是否展示单条通知	boolean	-
name	标识名称	string	-
type	通知类型	NotifyType	'default'
message	通知内容	string	-
icon	通知图标名称，同 icon 组件	IconName	-
icon-size	通知图标大小	string | number	-
duration	展示时长，为 0 不自动关闭	string | number	3000
transition-duration	动画时长	TransitionDuration	{ enter: 300, leave: 500 }
offset	弹出偏移量	string | number	16
offset-navbar	弹出偏移量是否添加导航栏高度	boolean	true
offset-tabbar	弹出偏移量是否添加标签栏高度	boolean	true
position	弹出位置	'top' | 'bottom'	'top'
closeable	是否显示关闭按钮	boolean	false
close-icon	关闭按钮图标名称	IconName	'round-close-fill'
close-icon-size	关闭按钮图标大小	string | number	-
z-index	层级	string | number	2001+
grouping	是否合并相同文案且相同类型的通知	boolean	false

NotifyItem Props

参数	说明	类型	默认值
v-model	是否展示	boolean	-
type	通知类型	NotifyType	'default'
message	通知内容	string	-
icon	通知图标名称，同 icon 组件	IconName	-
icon-size	通知图标大小	string | number	-
duration	展示时长，为 0 不自动关闭	string | number	0
count	合并次数，大于 1 时展示徽标	string | number	1
transition	弹出动画	TransitionName	'collapse-fade'
transition-duration	动画时长	TransitionDuration	300
closeable	是否显示关闭按钮	boolean	false
close-icon	关闭按钮图标名称	IconName	'round-close-fill'
close-icon-size	关闭按钮图标大小	string | number	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Notify Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
update:model-value	展示状态更新时触发	boolean
click-item	点击通知项时触发	NotifyOnClickItemEvent
open	打开时触发	NotifyItem
opened	打开动画结束时触发	NotifyItem
close	关闭时触发	NotifyItem
closed	关闭动画结束时触发	NotifyItem

NotifyItem Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
click-close	点击关闭时触发	MouseEvent
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-

NotifyItem Slots

名称	说明
icon	图标
default	消息
close	关闭按钮

Notify Expose

方法名	说明	参数	返回值
open	打开通知	NotifyOpenOption	number
close	关闭通知	id?: number	-

类型定义

组件导出以下类型定义：

import type {
  NotifyItem,
  NotifyOpenOption,
  NotifyOnClickItemEvent,
  NotifyInstance,
} from 'vital-design';