Una biblioteca de mensajes de burbujas simple, de solo 3 kb
Imitación del componente de mensaje Element-ui. Debido a que me gusta especialmente este componente, solo se puede aplicar a Vue.js, así que imité uno usando js nativo, no puedo decir que sea 100% igual, pero debe ser. ser al menos un 90% similar, si hay espacio para la optimización, ¿las relaciones públicas son bienvenidas?
Utilice npm:
npm install msg-alert --save
Usando CDN:
< script src =" https://cdn.jsdelivr.net/npm/msg-alert " > </ script >
Consulte public/index.html en el almacén.
Módulo ESModule
import message from 'msg-alert'
// 使用方法如下浏览器使用示例
Módulo CommonJS
const message = require ( 'msg-alert' )
// 使用方法如下浏览器使用示例
Usar en el navegador
< 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 >
Tipo: Number
Valor predeterminado: 1
Nivel de visualización del mensaje (global)
Tipo: Function
Destruir todos los mensajes
Tipo: String
Valor predeterminado: info
Tipo de visualización de mensajes
Tipo: String
valor predeterminado: ''
Contenido de la visualización del mensaje
Tipo: Number
Valor predeterminado: 1
Nivel de visualización del mensaje (aparecido actualmente)
Tipo: Number
Valor predeterminado: 20
Mensaje desplazado desde la parte superior de la ventana
Tipo: Number
Valor predeterminado: 3000
Duración de la visualización del mensaje, establecida en 0 para no cerrar nunca (unidad: milisegundos)
Tipo: String
valor predeterminado: ''
Personaliza el nombre de clase de Mensaje
Tipo: Boolean
Valor predeterminado: false
Si se debe procesar el atributo text
como un fragmento HTML (prepare el procesamiento tipo xss con anticipación)
Tipo: Boolean
Valor predeterminado: false
Ya sea para mostrar un botón de cierre
Tipo: Function
valor predeterminado: -
Función de devolución de llamada antes de cerrar el mensaje
Tipo: String | HTMLElement
Valor predeterminado: document.body
Establecer el enlace del elemento raíz del componente.