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>».

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

Образец:

<notifications position="top left"/>

Заключение

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

2717 просмотров