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

26.03.2020

Скачать пример #10

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/

Резюме

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

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

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

Скачать пример #10

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

Web-dev склерозник
Коментарі:
Додати коментар
Code
* - обов'язкові поля

Категорії

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

Tags

bme280 bmp280 gps mpu-6050 options stm32 ssd1331 ssd1306 eb-500 3d-printer soldering tim mpu-9250 dma watchdog piezo exti web raspberry-pi docker ngnix solar bluetooth foc html css brushless flask dc-dc capture gpio avr rs-232 mpx4115a atmega mongodb st-link barometer pwm nvic git java-script programmator dht11 hih-4000 pmsm encoder max1674 smd sensors rtc adc lcd motor timer meteo examples i2c usb flash sms rfid python esp8266 servo books bldc remap eeprom bkp battery ethernet uart usart displays led websocket nodemcu wifi

Архіви