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. Финальный пример
Недавні записи
- Модуль драйверів напівмосту IGBT транзисторів
- Драйвер IGBT транзисторів на A316J
- AS5600. Варіант встановлення на BLDC мотор
- DC-DC для IGBT драйверів ізольований 2 W +15 -8 вольт
- U-FOC - Векторне керування безколекторними моторами
- FOC - своя реалізація векторного керування. Підбиваю підсумки 2022 року
- Конструктор регуляторів моторів. Підбиваю підсумки 2022 року.
- Чому трифазні мотори стали такими популярними?
- FOC & Polar coordinates
- Конструктор регуляторів PMSM, BLDC двигунів
Tags
ngnix avr brushless motor examples dma books lcd usb dht11 piezo led servo web pmsm esp8266 ssd1331 wifi bme280 mpu-9250 capture hih-4000 bldc programmator rs-232 ethernet docker dc-dc sms bkp stm32 css git uart meteo bmp280 3d-printer displays mpx4115a eeprom max1674 soldering atmega timer gps tim flash nvic html java-script pwm solar rfid nodemcu st-link options watchdog adc gpio battery bluetooth raspberry-pi python websocket usart foc mongodb flask mpu-6050 barometer exti smd ssd1306 i2c sensors remap rtc encoder eb-500
Архіви