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

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

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

Установка

npm install --save vue-notification

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

В main.js:

import Vue           from 'vue'
import Notifications from 'vue-notification'

/*
or for SSR: 
import Notifications from 'vue-notification/dist/ssr.js'
*/

Vue.use(Notifications)

В App.vue:

<notifications group="foo" />

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

this.$notify({
  group: 'foo',
  title: 'Important message',
  text: 'Hello user! This is a notification!'
});

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

import Vue from 'vue'

Vue.notify({
  group: 'foo',
  title: 'Important message',
  text: 'Hello user! This is a notification!'
})

Параметры

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

Имя	Тип	По умолчанию	Описание
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

this.$notify({
    // (optional)
    // Name of the notification holder
    group: 'foo',

    // (optional)
    // Class that will be assigned to the notification
    type: 'warn',

    // (optional)
    // Title (will be wrapped in div.notification-title)
    title: 'This is title',

    // Content (will be wrapped in div.notification-content)
    text: 'This is <b> content </b>',

    // (optional)
    // Overrides default/provided duration
    duration: 10000,

    // (optional)
    // Overrides default/provided animation speed
    speed: 1000

    // (optional)
    // Data object that can be used in your template
    data: {}
  })

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

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

this.$notify('text')

Группы

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

Образец:

<notifications group="auth"/>
<notifications group="app"/>

this.$notify({ group: 'auth', text: 'Wrong password, please try again later' })

Позиция

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

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

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

Образец:

<notifications position="top left"/>

Заключение

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