msg alert

Alerte SMS

Une simple bibliothèque d'invites de messages à bulles, seulement 3 Ko

Imitation du composant Element-ui Message. Parce que j'aime particulièrement ce composant, mais il ne peut être appliqué qu'à Vue.js, donc j'en ai imité un en utilisant du js natif, je ne peux pas dire que c'est 100% pareil, mais il le faut. être similaire à au moins 90 %, s'il y a place à l'optimisation, les relations publiques sont les bienvenues ?

Installer

Utilisez npm :

npm install msg-alert --save

Utilisation du CDN :

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

Comment utiliser

Veuillez vous référer à public/index.html dans l'entrepôt

Module ESModule

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

Module CommonJS

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

Utiliser dans le navigateur

 < 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 d'options

message.zIndex

Type : Number

Valeur par défaut : 1

Niveau d'affichage du Message (global)

message.destroyAll

Type : Function

Détruisez tous les messages

taper

Type : String

Valeur par défaut : info

Type d'affichage des messages

texte

Type : String

valeur par défaut : ''

Contenu de l'affichage du message

zIndex

Type : Number

Valeur par défaut : 1

Niveau d'affichage du message (actuellement affiché)

compenser

Type : Number

Valeur par défaut : 20

Message décalé par rapport au haut de la fenêtre

durée

Type : Number

Valeur par défaut : 3000

Durée d'affichage du message, réglée à 0 pour ne jamais fermer (unité : millisecondes)

Classe personnalisée

Type : String

valeur par défaut : ''

Personnaliser le nom de classe de Message

HTML

Type : Boolean

Valeur par défaut : false

S'il faut traiter l'attribut text en tant que fragment HTML (veuillez préparer un traitement de type XSS à l'avance)

afficherFermer

Type : Boolean

Valeur par défaut : false

S'il faut afficher un bouton de fermeture

surFermer

Type : Function

valeur par défaut : -

Fonction de rappel avant la fermeture du message

ajouterÀ

Type : String | HTMLElement

Valeur par défaut : document.body

Définir le lien de l'élément racine du composant