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 разработчика библиотеки.