Van Notify

Vant Notify Component

A notification component that displays messages at the top of the page, supporting both component and function call methods.

When to Invoke

Invoke this skill when:

• User needs to display temporary notification messages
• User wants to show success/error/warning alerts
• User needs top-positioned toast notifications
• User asks about notification types or customization
• User wants to implement status feedback messages

Features

• Function Call: Quick invocation via showNotify
• Multiple Types: Primary, success, warning, danger types
• Custom Position: Top or bottom positioning
• Auto Close: Configurable auto-close duration
• Custom Styling: Custom colors and background
• Component Mode: Full customization via component usage

API Reference

Methods

NotifyOptions

Props (Component Usage)

Events

Slots

Types

import type { NotifyType, NotifyProps, NotifyOptions, NotifyPosition } from 'vant'

Usage Examples

Basic Usage

<script setup>
import { showNotify, closeNotify } from 'vant'

const showBasicNotify = () => {
  showNotify('Message')
}

const showAndClose = () => {
  showNotify('Message')
  setTimeout(() => closeNotify(), 1000)
}
</script>

Notify Types

<script setup>
import { showNotify } from 'vant'

const showPrimary = () => showNotify({ type: 'primary', message: 'Primary' })
const showSuccess = () => showNotify({ type: 'success', message: 'Success' })
const showDanger = () => showNotify({ type: 'danger', message: 'Danger' })
const showWarning = () => showNotify({ type: 'warning', message: 'Warning' })
</script>

Custom Styling

<script setup>
import { showNotify } from 'vant'

const showCustom = () => {
  showNotify({
    message: 'Custom Color',
    color: '#ad0000',
    background: '#ffe1e1'
  })
}

const showBottom = () => {
  showNotify({
    message: 'Bottom Position',
    position: 'bottom'
  })
}

const showShort = () => {
  showNotify({
    message: '1 Second Duration',
    duration: 1000
  })
}
</script>

Component Usage

<template>
  <van-button type="primary" @click="showNotify">Show Notify</van-button>
  <van-notify v-model:show="show" type="success">
    <van-icon name="bell" style="margin-right: 4px;" />
    <span>Content</span>
  </van-notify>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)

const showNotify = () => {
  show.value = true
  setTimeout(() => {
    show.value = false
  }, 2000)
}
</script>

With Callbacks

<script setup>
import { showNotify } from 'vant'

const showWithCallback = () => {
  showNotify({
    message: 'Click me',
    onClick: () => {
      console.log('Notify clicked')
    },
    onOpened: () => {
      console.log('Notify opened')
    },
    onClose: () => {
      console.log('Notify closed')
    }
  })
}
</script>

Common Issues

1. Notify Not Disappearing

Set duration to 0 for persistent notify, close manually:

showNotify({ message: 'Persistent', duration: 0 })
setTimeout(() => closeNotify(), 5000)

2. Multiple Notifies Overlapping

Close previous notify before showing new one:

const showSequential = () => {
  closeNotify()
  showNotify({ message: 'New message' })
}

3. Custom Type Colors

Use background and color for full customization:

showNotify({
  message: 'Custom',
  background: '#07c160',
  color: '#fff'
})

Component Interactions

With Form Submission

<script setup>
import { showNotify } from 'vant'

const submitForm = async () => {
  try {
    await submitData()
    showNotify({ type: 'success', message: 'Submitted successfully' })
  } catch (error) {
    showNotify({ type: 'danger', message: 'Submission failed' })
  }
}
</script>

With Network Status

<script setup>
import { showNotify, closeNotify } from 'vant'

watch(networkStatus, (status) => {
  if (!status.connected) {
    showNotify({
      type: 'warning',
      message: 'Network disconnected',
      duration: 0
    })
  } else {
    closeNotify()
    showNotify({ type: 'success', message: 'Network restored' })
  }
})
</script>

With Action Confirmation

<script setup>
import { showNotify } from 'vant'

const deleteItem = (id) => {
  showNotify({
    type: 'danger',
    message: 'Item deleted',
    duration: 2000
  })
}
</script>

Best Practices

1. Appropriate duration: Use 2-3 seconds for most messages
2. Type selection: Use appropriate type for context
3. Concise messages: Keep messages short and clear
4. Avoid spamming: Don't show too many notifies in succession
5. Position consistency: Stick to one position in your app
6. Accessibility: Ensure sufficient color contrast