Notify 消息通知

介绍

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

函数调用

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

WARNING

因小程序无法动态挂载组件，使用时需要页面存在一个 Notify 组件，且函数调用方法需要在 onLoad 生命周期后调用。

<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 });

单例使用

通过 v-model 控制通知是否展示，你也可以通过组件的 ref 获取实例，调用 open 方法打开通知。

<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	'spinner'
type	通知类型	NotifyType	'default'
message	通知内容	string	-
icon	通知图标名称，同 icon 组件	IconsName	-
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	关闭按钮图标名称	IconsName	'round-close-fill'
close-icon-size	关闭按钮图标大小	string | number	-
z-index	层级	string | number	2001+

NotifyItem Props

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

代替原始 Props

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

Notify Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
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	关闭按钮