msg alert

Msg-Alert

一個簡單的氣泡訊息提示庫，僅3kb

仿Element-ui Message 元件，由於我特別喜歡這個元件，但奈何它只能應用在Vue.js，於是就用​​原生js 仿造了一個，不敢說100% 一樣，但起碼得有90% 的相似度，如果有優化空間，歡迎PR??

安裝

使用npm:

npm install msg-alert --save

使用CDN:

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

使用方法

可參考倉庫中的public/index.html

ESModule 模組

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

CommonJS 模組

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

在瀏覽器中使用

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

選項API

message.zIndex

類型: Number

預設值: 1

Message 的顯示層級（全域）

message.destroyAll

類型: Function

銷毀所有的Message

type

類型: String

預設值: info

Message 顯示類型

text

類型: String

預設值: ''

Message 顯示內容

zIndex

類型: Number

預設值: 1

Message 的顯示層級（目前彈出）

offset

類型: Number

預設值: 20

Message 距離視窗頂部的偏移量

duration

類型: Number

預設值: 3000

Message 顯示的持續時間,設定為0 表示永不關閉(單位毫秒)

customClass

類型: String

預設值: ''

自訂Message 的類別名

html

類型: Boolean

預設值: false

是否將text屬性當作HTML 片段處理(請事先做好仿xss 的處理)

showClose

類型: Boolean

預設值: false

是否顯示關閉按鈕

onClose

類型: Function

預設值: -

Message 關閉前的回呼函數

appendTo

類型: String | HTMLElement

預設值: document.body

設定組件的根元素鏈接