Vue шаг за шагом. Диалоги и Notifications. Пример#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/
Резюме
В этом примере реализованы основные диалоговые окна и создана система нотификаций.
В следующем примере
Создание единого Стандартного компонента для постраничного отображения данных с возможностью редактирования, добавления и удаления данных.
Смотри также:
- Vue. Vue-router
- Vue. Свойство data. Основы компонент
- Vue. CRUD. Работа с данными
- Vue. Mixins (Примеси)
- Vue. computed свойства. Постраничный вывод данных
- Vue. Сортировка, поиск данных в таблицах
- Vue. Таблица - трансформер под настольные и мобильные версии
- Vue. Стандартная таблица. Минимизируем код
- Vue. Динамическая загрузка компонент
- Vue. Диалоги и Notifications
- Vue.Стандартный компонент для редактирования данных
- Vue. Разнообразие из кирпичиков
- Flask + Vue. Финальный пример
Додати коментар

Недавні записи
- Конструктор регуляторів моторів. Структура.
- Конструктор регуляторів моторів. Анонс.
- Golang + Vue + PostgreSQL #2
- Golang + Vue + SQLite #1
- FOC Position Control. Векторне управління - Стабілізація положення
- Flask & Vue. Завантаження файлів. Приклад № 2.10
- Рекуперація. FOC і цікаві досліди
- Flask & Vue. OAuth. Приклад№ 2.9
- Flask & Vue. Використання систем збірки проекту. Webpack. Приклад№ 2.8
- Flask & Vue. SQLAlchemy, Migrate, Marshmallow, JWT. Приклад№ 2.7
Tags
stm32 bkp soldering eeprom eb-500 led hih-4000 bme280 bmp280 3d-printer usb ethernet html git docker barometer raspberry-pi remap dc-dc rfid java-script nodemcu mpu-6050 rtc capture gpio avr brushless foc options flash flask atmega python displays rs-232 solar st-link ssd1331 dma adc bluetooth web ssd1306 wifi exti mpu-9250 pwm pmsm mongodb programmator i2c battery max1674 piezo css meteo watchdog books websocket servo dht11 ngnix mpx4115a lcd motor uart sensors nvic encoder usart sms smd bldc esp8266 tim timer gps examples
Архіви
