msg alert

メッセージアラート

シンプルなバブルメッセージプロンプトライブラリ、わずか 3kb

Element-ui Message コンポーネントの模倣。このコンポーネントは特に気に入っていますが、Vue.js にのみ適用できるため、100% 同一であるとは言えませんが、ネイティブ JS を使用して模倣しました。少なくとも 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.destroyAll

タイプ: Function

すべてのメッセージを破棄する

タイプ

タイプ: String

デフォルト値: info

メッセージ表示タイプ

文章

タイプ: String

デフォルト値: ''

メッセージ表示内容

zインデックス

タイプ: Number

デフォルト値: 1

メッセージの表示レベル（現在ポップアップ表示されている）

オフセット

タイプ: Number

デフォルト値: 20

ウィンドウの上部からのメッセージのオフセット

間隔

タイプ: Number

デフォルト値: 3000

メッセージの表示期間。閉じない場合は 0 に設定します(単位: ミリ秒)

カスタムクラス

タイプ: String

デフォルト値: ''

メッセージのクラス名をカスタマイズする

html

タイプ: Boolean

デフォルト値: false

text属性をHTMLフラグメントとして処理するかどうか（xssライクな処理を事前に用意してください）

表示閉じる

タイプ: Boolean

デフォルト値: false

閉じるボタンを表示するかどうか

閉じる

タイプ: Function

デフォルト値: -

メッセージを閉じる前のコールバック関数

追加する

タイプ: String | HTMLElement

デフォルト値: document.body

コンポーネントのルート要素リンクを設定します。