Alert

静默式消息通知对话框，显示于屏幕的中间位置

实例

消息类型

Information

Warning

Error

Success

Colorful Shadow

信息确认

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

界面定制化

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

配置选项 AlertOptions 的类型描述

interface AlertOptions {
  /**
   * 语言
   * @default `en`
   */
  language?: string
  /**
   * 自定义样式类名
   */
  customClass?: string
  /**
   * 显示标题栏
   * @default true
   */
  header?: boolean
  /**
   * 标题栏文本内容
   */
  title?: string
  /**
   * 消息类型
   * @default `info`
   */
  messageType?: 'info' | 'warning' | 'error' | 'success' | 'confirm'
  /**
   * 消息类型图标
   * @default true
   */
  icon?: boolean
  /**
   * 对话框外操作，抖动窗口提醒
   * @default false
   */
  shaking?: boolean
  /**
   * 应用对应消息类型的颜色阴影，增强显示效果
   * @default false
   */
  colorfulShadow?: boolean
  /**
   * 响应 `confirm` 模式下取消按钮的事件
   */
  cancelCallback?: Function
  /**
   * 点击对话框以外的区域，关闭对话框
   * @default false
   */
  backdropClose?: boolean
}