msg alert

Alerta de mensagem

Uma biblioteca simples de prompts de mensagens em formato de bolha, apenas 3kb

Imitação do componente Element-ui Message Como gosto particularmente desse componente, mas ele só pode ser aplicado ao Vue.js, então imitei um usando js nativo, não posso dizer que seja 100% igual, mas deve. ser pelo menos 90% semelhante, se houver espaço para otimização, PR é bem-vindo?

Instalar

Usar npm:

npm install msg-alert --save

Usando CDN:

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

Como usar

Consulte public/index.html no warehouse

Módulo ESModule

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

Módulo CommonJS

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

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

API de opções

mensagem.zIndex

Tipo: Number

Valor padrão: 1

Nível de exibição da mensagem (global)

mensagem.destroyAll

Tipo: Function

Destrua todas as mensagens

tipo

Tipo: String

Valor padrão: info

Tipo de exibição de mensagem

texto

Tipo: String

valor padrão: ''

Conteúdo de exibição de mensagens

zIndex

Tipo: Number

Valor padrão: 1

Nível de exibição da mensagem (atualmente exibida)

desvio

Tipo: Number

Valor padrão: 20

Deslocamento da mensagem na parte superior da janela

duração

Tipo: Number

Valor padrão: 3000

Duração de exibição da mensagem, definida como 0 para nunca fechar (unidade: milissegundos)

classe personalizada

Tipo: String

valor padrão: ''

Personalize o nome da classe de Mensagem

HTML

Tipo: Boolean

Valor padrão: false

Se o atributo text deve ser processado como um fragmento HTML (prepare o processamento semelhante ao xss com antecedência)

mostrarFechar

Tipo: Boolean

Valor padrão: false

Se deve exibir um botão Fechar

emFechar

Tipo: Function

valor padrão: -

Função de retorno de chamada antes que a mensagem seja fechada

anexar a

Tipo: String | HTMLElement

Valor padrão: document.body

Defina o link do elemento raiz do componente