msg alert

MSG-Alert

A simple bubble message reminder library, only 3KB

Imitation of Element-UI Message component, because I especially like this component, but it can only be applied to Vue.js, so I use native JS to make one. If there is room for optimization, welcome PR ??

Install

Use NPM:

npm install msg-alert --save

Use CDN:

 < script src =" https://cdn.jsdelivr.net/npm/msg-alert " > </ script > 

Use

Can refer to the public/index.html in the warehouse

ESMODULE module

 import message from 'msg-alert'
// 使用方法如下浏览器使用示例

Commonjs module

 const message = require ( 'msg-alert' )
// 使用方法如下浏览器使用示例

Use in the browser

 < script src =" https://cdn.jsdelivr.net/npm/msg-alert " > </ script >
< script >
  // 默认 等价 message({type:'info',text:'这是一个段落'})
  message ( '这是一个段落' )
  message . info ( '这是一个段落' )
  // 成功 等价 message({type:'success',text:'success'})
  message . success ( 'success' )
  // 警告 等价 message({type:'warn',text:'warn'})
  message . warn ( 'warn' )
  // 错误 等价 message({type:'error',text:'error'})
  message . error ( 'error' )
</ script > 

Option API

Message.zindex

Type: Number

Default value: 1

MESSAGE's display level (global)

Message.destroyall

Type: Function

Destroy all Message

Type

Type: String

Default value: info

Message display type

text

Type: String

default value: ''

Message display content

zindex

Type: Number

Default value: 1

MESSAGE's display level (currently popped up)

offset

Type: Number

Default value: 20

MESSAGE's offset from the top of the window

duration

Type: Number

Default value: 3000

MESSAGE displayed duration, set to 0 to indicate that it will never be closed (unit millisecond)

CustomClass

Type: String

default value: ''

Customize the class name of Message

html

Type: Boolean

Default value: false

Whether the text property is treated as the HTML fragment (please do the processing of imitation XSS in advance)

showclose

Type: Boolean

Default value: false

Whether to display the closed button

onClose

Type: Function

default value: -

MESSAGE's callback function before closed

APPENDTO

Type: String | HTMLElement

Default value: document.body

Set the root element link of the component