zg-message
v0.0.15
Published
```html <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"> ```
Downloads
7
Readme
浏览器脚本引入
<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)