Alert

Modal message notification dialog box, displayed in the middle of the screen, is usually used in scenarios where active interactive confirmation is required

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 })

Quick access type

v-dialogs provides quick type functions for Alert dialog

• DialogAlertWarning
• DialogAlertError
• DialogAlertSuccess
• DialogAlertConfirm

import { DialogAlert, DialogAlertSuccess } from 'v-dialogs'

DialogAlertSuccess('Hello')
⇓
DialogAlert('Hello', { messageType: 'success' })

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
}