shop-wx/doc/wot-design-uni/docs/en-US/component/use-notify.md

useNotify

Used for conveniently calling the Notify notification component.

Basic Usage

You need to import the wd-notify component in the page as a mounting point.

<wd-notify />
<wd-button @click="showNotify">notify</wd-button>

import { useNotify } from '@/uni_modules/wot-design-uni'

const { showNotify } = useNotify()

function showNotify() {
  showNotify('Notification content')
}

Notification Type

Supports four types of notifications: primary, success, warning, danger, with danger as the default.

// Primary notification
showNotify({ type: 'primary', message: 'Notification content' })

// Success notification
showNotify({ type: 'success', message: 'Notification content' })

// Danger notification
showNotify({ type: 'danger', message: 'Notification content' })

// Warning notification
showNotify({ type: 'warning', message: 'Notification content' })

Custom Style

showNotify({
  message: 'Custom color',
  color: '#ad0000',
  background: '#ffe1e1'
})

showNotify({
  message: 'Custom position',
  position: 'bottom'
})

showNotify({
  message: 'Custom duration',
  duration: 1000
})

API

Methods

Method Name	Description	Parameters
showNotify	Show notification	NotifyOptions / string
closeNotify	Close notification	-
setNotifyDefaultOptions	Modify default configuration, affects all showNotify calls	NotifyOptions
resetNotifyDefaultOptions	Reset default configuration, affects all showNotify calls	-

Options

Parameter	Description	Type	Accepted Values	Default
type	Type	NotifyType	primary success warning danger	danger
message	Display text, supports line breaks with \n	string	-	-
duration	Display duration (ms), when value is 0, notify will not disappear	number	-	3000
zIndex	Layer level	number	-	99
position	Pop-up position	NotifyPosition	top bottom	top
color	Font color	string	-	-
background	Background color	string	-	-
safeHeight	Top safe height	number / string	-	-
onClick	Callback function when clicked	(event: MouseEvent) => void	-	-
onClosed	Callback function when closed	() => void	-	-
onOpened	Callback function after display	() => void	-	-