zg-message

浏览器脚本引入

<script src="path_of_zg-message/zg-message.umd.js"></script>
<link rel="stylesheet" type="text/css" href="path_of_zg-message/style.min.css">

使用方式

window.$ZgMessage.info('消息')
window.$ZgMessage.success('成功')
window.$ZgMessage.warning('警告')
window.$ZgMessage.error('错误')
window.$ZgMessage.info({ content: '内容', type: 'info' })

npm方式引入

npm i zg-message

使用方式

// 引入库
import ZgMessage from 'zg-message'
// 引入样式文件
import 'zg-message/dist/style.css'

// 使用
ZgMessage.info('消息')
ZgMessage.success('成功')
ZgMessage.warning('警告')
ZgMessage.error('错误')
ZgMessage.info({ content: '内容', type: 'info' })

配置参数:

interface Options {
  /**
   * 消息类型
   */
  type: MessageType
  /**
   * 消息内容，可以是字符串，也可以是html节点
   * escapeMarkup配置为false时，字符串类型默认按照html内容渲染
   * escapeMarkup配置为ture时，字符串会作为纯字符串渲染
   */
  content?: string | Node
  /**
   * 时长，为0时为不自动消失；默认值：5000
   * @default 5000
   */
  duration?: number | undefined
  /**
   *
   */
  selector?: string | Node | undefined
  /**
   * 是否显示关闭图标，默认显示
   */
  close?: boolean | undefined
  /**
   * 垂直方向位置
   */
  gravity?: 'top' | 'bottom' | undefined
  /**
   * 水平方向位置
   */
  position?: 'left' | 'center' | 'right' | undefined
  /**
   * Announce the toast to screen readers
   * @default 'polite'
   */
  ariaLive?: 'off' | 'polite' | 'assertive' | undefined
  /**
   * 类名
   */
  className?: string | undefined
  /**
   * 聚焦阻止自动隐藏，默认阻止
   * @default true
   */
  stopOnFocus?: boolean | undefined
  /**
   * 隐藏回调
   */
  callback?: (() => void) | undefined
  /**
   * 点击回调
   */
  onClick?: (() => void) | undefined
  /**
   * 偏移
   */
  offset?: {
    x: number | string
    y: number | string
  } | undefined
  /**
   * 是否对content进行HTML 转义，默认为false，不转义（选择然按钮标签等标签）
   */
  escapeMarkup?: boolean | undefined
  /**
   * 样式
   */
  style?: CSSStyleDeclaration
  /**
   * 最早消息显示靠前，默认为true
   * @default true
   */
  oldestFirst?: boolean | undefined
}

方法：

/**
 * 配置默认选项
 * @param options 默认选项
 */
function setup(options: Partial<Options>)

// 显示消息，需要传入type类型
function message(options: Options)

// 显示info类型的消息，options中不需要type参数
function info(content: string | Node, options?: Options)

// 显示warning类型的消息，options中不需要type参数
function warning(content: string | Node, options?: Options)

// 显示success类型的消息，options中不需要type参数
function success(content: string | Node, options?: Options)

// 错误平台错误信息类型，从平台获取到的错误消息体内容类型
interface ErrorModelType {
  code?: number | string
  message: string
  // 帮助链接
  link?: string
  // 是否支持【不再提醒】
  isSetHide?: 0 | 1
  // 【不再提醒】时长
  hideTime?: number
}
// 显示error类型的消息，options中不需要type参数
function error(error?: string | Error | ErrorModelType, options?: Options)