Vue шаг за шагом. Диалоги и Notifications. Пример#10

26.03.2020

md-dialog для Vue

В этом примере используется md-dialog для создания диалоговых окон. Форма для редактирования данных превращена в диалоговое окно. Использован шрифт fontawesome для создания иконок. Сделаны диалоги alert, confirm, confirm3btn, prompt. Перед удалением записи запрашиваться подтверждение. В приложение добавлена система нотификаций (Notifications). Компонент notification отображает всплывающие сообщения, информирующих пользователя о каких либо событиях. Сообщения исчезают через определенное время.

md-dialog

Используется md-dialog для того чтобы превратить форму в диалоговое окно.

Fontawesome

Для создания иконок используется специальный шрифт.

fonts/fontawesome/css/fontawesome-all.min.css

Добавлены стили fa-icon, fa-icon-900 для задания нужного отображения иконок.

vuejs-dialog

Диалоги alert, confirm, confirm3btn, prompt. Диалоги общие для всего приложения. Вызов диалогов выполняется через методы приложения. Пример:



app.confirm('Delete ?').then(()=> {
    ...
}).catch( function () {
    ...
})

...
app.alert(‘Error!’)
...

Notifications

Для реализации системы notifications добалены notifications в данные приложения. Добавлены методы приложения app.notify — выводит notification, app.onDismissNotify — удаляет notification. Создан компонент notification, который отвечает за отображение уведомлений. Вставлен в index.html:



    <notification :items="notifications" delay="0" lifetime="3000" @ondismiss="onDismissNotify($event)"></notification>

Стиль уведомлений в отдельном файле: frontend3/vue/css/vue-notify.css

Ссылки

Vue Material — Dialog: https://vuematerial.io/components/dialog/

Fontawesome: https://fontawesome.com/

Резюме

В этом примере реализованы основные диалоговые окна и создана система нотификаций.

В следующем примере

Создание единого Стандартного компонента для постраничного отображения данных с возможностью редактирования, добавления и удаления данных.

Vue шаг за шагом. Диалоги и Notifications. Пример#10

md-dialog для Vue

md-dialog

Fontawesome

vuejs-dialog

Notifications

Ссылки

Резюме

В следующем примере

Смотри также:

Додати коментар

Категорії

Недавні записи

Tags

Архіви

Підписка