Notify - Vant 4

Notify

Intro

The display message prompt is at the top of the page, and supports two methods: component call and function call.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Notify } from'vant'; const app = createApp(); app.use(Notify);

Function Call

Vant provides some utility functions that can quickly evoke global Notify components.

For example, calling the showNotify function will render a Dialog directly in the page.

import { showNotify } from'vant'; showNotify('Notify Message');

Usage

Basic Usage

import { showNotify, closeNotify } from'vant'; // auto close after 3sshowNotify('Message'); // manually closecloseNotify();

Notify Type

import { showNotify } from'vant'; showNotify({ type: 'primary', message: 'Notify Message' }); showNotify({ type: 'success', message: 'Notify Message' }); showNotify({ type: 'danger', message: 'Notify Message' }); showNotify({ type: 'warning', message: 'Notify Message' });

Custom Notify

import { showNotify } from'vant'; showNotify({ message: 'Custom Color', color: '#ad0000', background: '#ffe1e1', }); showNotify({ message: 'Custom Position', position: 'bottom', }); showNotify({ message: 'Custom Duration', duration: 1000, });

Use Notify Component

import { ref } from'vue'; exportdefault { setup() { const show = ref(false); constshowNotify = () => { show.value = true; setTimeout(() => { show.value = false; }, 2000); }; return { show, showNotify, }; }, };

API

Methods

Vant exports following Notify utility functions:

Methods	Description	Attribute	Return value
showNotify	Display Notify at the top of the page	`NotifyOptions	string`
closeNotify	Close the currently displayed Notify	-	void
setNotifyDefaultOptions	Modify the default configuration, affecting all showNotify calls	NotifyOptions	void
resetNotifyDefaultOptions	Reset the default configuration, affecting all showNotify calls	-	void

NotifyOptions

When calling the showNotify and other related methods, the following options are supported:

Attribute	Description	Type	Default
type	Can be set to primary``success``warning	NotifyType	danger
message	Message	string	-
duration	Duration(ms), won't disappear if value is 0	*number	string*
zIndex	Set the z-index to a fixed value	*number	string*
position	Position, can be set to bottom	NotifyPosition	top
color	Message color	string	white
background	Background color	string	-
className	Custom className	*string	Array
lockScroll	Whether to lock background scroll	boolean	false
teleport	Specifies a target element where Notify will be mounted	*string	Element*
onClick	Callback function after click	(event: MouseEvent) => void	-
onOpened	Callback function after opened	() => void	-
onClose	Callback function after close	() => void	-

Props

When using Notify as a component, the following props are supported:

Attribute	Description	Type	Default
v-model:show	Whether to show notify	boolean	false
type	Can be set to primary``success``warning	NotifyType	danger
message	Message	string	-
z-index	Set the z-index to a fixed value	*number	string*
position	Position, can be set to bottom	NotifyPosition	top
color	Message color	string	white
background	Background color	string	-
class-name	Custom className	*string	Array
lock-scroll	Whether to lock background scroll	boolean	false
teleport	Specifies a target element where Notify will be mounted	*string	Element*

Events

When using Notify as a component, the following events are supported:

Event	Description	Parameters
click	Callback function after click	event: MouseEvent
close	Callback function after close	-
opened	Callback function after opened	-

Slots

When using Notify as a component, the following slots are supported:

Name	Description
default	Custom content

Types

The component exports the following type definitions:

importtype { NotifyType, NotifyProps, NotifyOptions, NotifyPosition, } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-notify-text-color	var(--van-white)	-
--van-notify-padding	var(--van-padding-xs) var(--van-padding-md)	-
--van-notify-font-size	var(--van-font-size-md)	-
--van-notify-line-height	var(--van-line-height-md)	-
--van-notify-primary-background	var(--van-primary-color)	-
--van-notify-success-background	var(--van-success-color)	-
--van-notify-danger-background	var(--van-danger-color)	-
--van-notify-warning-background	var(--van-warning-color)	-