Alert

Silent message notification, displayed in the vertical center area of ​​the screen

Examples

Message types

Information

Warning

Error

Success

Colorful Shadow

Information confirmed

import { DialogAlert, DialogMessage, DialogMessageSuccess } from 'v-dialogs'

function deleteUser (userId) {
  const message = 'Deleted data cannot be recovered, are you sure?'
  const callback = () => {
    executeDeleteUser(userId).then(() => {
      DialogMessageSuccess('Delete complete.')
    })
  }
  const options = {
    messageType: 'confirm',
    cancelCallback: () => {
      DialogMessage('Canceled')
    }
  }
  DialogAlert(message, callback, options)
}

UI customization

DialogAlert('Hello', { icon: false })
DialogAlert('Hello', { header: false })
DialogAlert('Hello', { title: 'Custom title' })
DialogAlert('Hello', { shake: true })

API

type MessageContent = string | VNode

function DialogAlert(
  message?: MessageContent,
  callback?: Function,
  options?: AlertOptions
): Function

The setting options AlertOptions details

interface AlertOptions {
  /**
   * Plugin language
   * @default `en`
   */
  language?: string
  /**
   * Custom class name
   */
  customClass?: string
  /**
   * Display the header
   * @default true
   */
  header?: boolean
  /**
   * The title text displayed in header
   */
  title?: string
  /**
   * Message types
   * @default `info`
   */
  messageType?: 'info' | 'warning' | 'error' | 'success' | 'confirm'
  /**
   * Message type icon
   * @default true
   */
  icon?: boolean
  /**
   * Shake the dialog when operating outside the dialog
   * @default false
   */
  shaking?: boolean
  /**
   * Use colorful shadow
   * @default false
   */
  colorfulShadow?: boolean
  /**
   * Respond the cancel button click in `confirm` type alert
   */
  cancelCallback?: Function
  /**
   * Click outside the dialog to close dialog
   * @default false
   */
  backdropClose?: boolean
}