VueJS библиотека, для показа всплывающих уведомлений с настройкой позиции, контента, стилей и т.д. Имеется удобный API для взаимодействия с компонентами.
Максимально прост в использовании. Не привязан к каким-то другим библиотекам. Имеет множество входящих параметров, так что Вы сможете настроить его под себя абсолютно гибко.
Установка
|
1 |
npm install --save vue-notification |
Как использовать
В main.js:
|
1 2 3 4 5 6 7 8 9 |
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:
|
1 |
<notifications group="foo" /> |
В любом из ваших файлов vue:
|
1 2 3 4 5 |
this.$notify({ group: 'foo', title: 'Important message', text: 'Hello user! This is a notification!' }); |
Любое другое место:
|
1 2 3 4 5 6 7 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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.
Также вы можете использовать упрощенную версию:
|
1 |
this.$notify('text') |
Группы
Если вы планируете использовать компонент notification для 2 и более совершенно разных типов уведомлений (например, сообщения об ошибках аутентификации в верхнем центре и generic App notifications в правом нижнем углу) — вы можете указать свойство group, которое по сути является именем владельца уведомления.
Образец:
|
1 2 |
<notifications group="auth"/> <notifications group="app"/> |
|
1 |
this.$notify({ group: 'auth', text: 'Wrong password, please try again later' }) |
Позиция
Для свойства Position требуется строка с 2 ключевыми словами для вертикального и горизонтального положения.
Формат: «<vertical> <horizontal>».
Горизонтальные варианты: left, center, right
Вертикальные варианты: top, bottom
Значение по умолчанию — «top right».
Образец:
|
1 |
<notifications position="top left"/> |
Заключение
Более подробную информацию Вы найдет на странице Github разработчика библиотеки.