msg alert

Сообщение-Оповещение

Простая библиотека всплывающих сообщений, всего 3 КБ.

Имитация компонента Element-ui Message. Потому что мне особенно нравится этот компонент, но его можно применить только к Vue.js, поэтому я имитировал его с помощью нативного js. Я не могу сказать, что он на 100% такой же, но он должен быть. быть хотя бы на 90% похожими, если есть возможности для оптимизации, пиар приветствуется??

Установить

Используйте НПМ:

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, чтобы никогда не закрываться (единица измерения: миллисекунды).

CustomClass

Тип: String

значение по умолчанию: ''

Настройте имя класса сообщения

HTML

Тип: Boolean

Значение по умолчанию: false

Обрабатывать ли text атрибут как фрагмент HTML (заранее подготовьте обработку, подобную xss)

показатьЗакрыть

Тип: Boolean

Значение по умолчанию: false

Отображать ли кнопку закрытия

onClose

Тип: Function

значение по умолчанию: -

Функция обратного вызова перед закрытием сообщения

добавитьTo

Тип: String | HTMLElement

Значение по умолчанию: document.body

Установите ссылку на корневой элемент компонента