Notify 消息提示

继承van-notify所有属性

在页面顶部展示消息提示，支持组件调用和函数调用两种方式。

基础用法

通知类型

支持 primary、success、warning、danger 四种通知类型，默认为 danger。

自定义通知

自定义消息通知的颜色、位置和展示时长。

使用 Notify 组件

如果需要在 Notify 内嵌入组件或其他自定义内容，可以直接使用 Notify 组件，并使用默认插槽进行定制。使用前需要通过 app.use 等方式注册组件。

API

方法

方法名	说明	参数
showNotify	展示通知	options: NotifyOptions
closeNotify	关闭通知	-
setNotifyDefaultOptions	设置默认通知配置	options: NotifyOptions
resetNotifyDefaultOptions	重置默认通知配置	-

NotifyOptions

调用 showNotify 等方法时，支持传入以下选项：

参数	说明	类型	默认值
type	通知类型	`'primary'	'success'
message	展示文案，支持通过 \n 换行	string	-
duration	通知显示时长，单位为毫秒	number	3000
zIndex	通知层级	number	1000
position	通知位置	`'top'	'bottom'`
color	通知颜色	string	-
background	通知背景色	string	-
className	自定义类名	string	-
lockScroll	是否锁定背景滚动	boolean	false
teleport	指定弹出位置	`string	Element`
onClick	点击时触发	() => void	-
onOpened	打开时触发	() => void	-
onClose	关闭时触发	() => void	-

Props

通过组件调用 Notify 时，支持以下 Props：

参数	说明	类型	默认值
v-model:show	是否展示通知	boolean	false
type	通知类型	`'primary'	'success'
message	展示文案，支持通过 \n 换行	string	-
z-index	通知层级	number	1000
position	通知位置	`'top'	'bottom'`
color	通知颜色	string	-
background	通知背景色	string	-
class-name	自定义类名	string	-
lock-scroll	是否锁定背景滚动	boolean	false
teleport	指定弹出位置	`string	Element`

事件

通过组件调用 Notify 时，支持以下 Events：

| 事件名 | 说明 | 回调参数 | | --- | | click | 点击时触发 | - | | opened | 打开时触发 | - | | close | 关闭时触发 | - |

插槽

通过组件调用 Notify 时，支持默认插槽定制通知内容。

插槽名	说明
default	自定义通知内容