Vue.js Notification — библиотека для создания всплывающих уведомлений

VueJS библиотека, для показа всплывающих уведомлений с настройкой позиции, контента, стилей и т.д. Имеется удобный API для взаимодействия с компонентами.

Максимально прост в использовании. Не привязан к каким-то другим библиотекам. Имеет множество входящих параметров, так что Вы сможете настроить его под себя абсолютно гибко.

Установка

Как использовать

В main.js:

В App.vue:

В любом из ваших файлов vue:

Любое другое место:

Параметры

Все реквизиты являются необязательными.

Имя Тип По умолчанию Описание
group String null Имя уведомления, если указано
type String null Класс, который будет назначен уведомлению
width Number/String 300 Ширина владельца уведомления, может быть %, px строка или число.
Допустимые значения: ‘100%’, ‘200px’, 200
classes String/Array ‘vue-notification’ Список классов, которые будут применены к элементу уведомление
position String/Array ‘top right’ Часть экрана, на которой будут появляться уведомления
animation-type String ‘css’ Тип анимации, в настоящее время поддерживаемые типы css и velocity
animation-name String null Имя анимации, необходимое для анимации css
animation Object $* Настройка анимации Velocity
duration Number 3000 Время (ms) анимация остается видимым (если отрицательный-уведомление останется навсегда или до щелчка
speed Number 300 Скорость отображения/скрытия анимации
max Number Infinity Максимальное количество уведомлений, которое может отображаться в держателе уведомлений
reverse Boolean false Показывать уведомления в обратном порядке

API

Заголовок и текст могут быть строками HTML.

Также вы можете использовать упрощенную версию:

Группы

Если вы планируете использовать компонент notification для 2 и более совершенно разных типов уведомлений (например, сообщения об ошибках аутентификации в верхнем центре и generic App notifications в правом нижнем углу) — вы можете указать свойство group, которое по сути является именем владельца уведомления.

Образец:

Позиция

Для свойства Position требуется строка с 2 ключевыми словами для вертикального и горизонтального положения.

Формат: «<vertical> <horizontal>».

Горизонтальные варианты: leftcenterright
Вертикальные варианты: topbottom
Значение по умолчанию — «top right».

Образец:

Заключение

Более подробную информацию Вы найдет на странице Github разработчика библиотеки.

223 просмотров