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