SwAlert
Функция / Компонент SwAlert система всплывающих сообщений. Сообщения могут быть с разным типом и временем показа. Могут иметь футер с кнопками.
Свойства / Properties
| Имя | Тип | по умолчанию | Значения/Описание |
|---|---|---|---|
class | String | sw-alert | Добавляет пользовательский CSS-класс к компоненту. |
size | String | `` | Размер сообщения: 'large', 'small'. |
type | String | info | Тип сообщения: 'primary', 'success', 'info', 'warning', 'danger'. |
message | String | Default message | Само сообщение. |
duration | Number | 6000 | Время отображения в миллисекундах. |
before | String | `` | Иконка в начале: имя из SVG-спрайта или URL (https://…). См. SwIcon. |
after | String | `` | Иконка в конце (кнопка закрыть): имя из спрайта или URL. См. SwIcon. |
Слоты / Slots
Default - Текст описания или модуль / модули
#prefix - Вставка перед текстом (если не передан before)
#suffix - Вставка после текста (если не передан after)
#footer - Нижний блок
Пример использования / Example Usage
// .js addons
import { Alert, components } from "@studio-west/component-sw"
import { h } from 'vue'
Alert({message: 'Message', type: 'danger', duration:10000, before:'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/bell.svg', footer: h(components.SwButton, { onClick: () => console.log('Клик по кнопке в футере') }, () => 'OK')})
// Composition API else <script setup>:
import { inject, h } from "vue"
import { components } from "@studio-west/component-sw"
const Alert = inject('Alert')
Alert({message: 'Alarm!', type: 'warning', suffix: h(components.SwIcon, { iconClass: 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/info-circle.svg' })})
//Options API:
this.$Alert({message: 'Welcome!', type: 'success', prefix: 'Дополнительная информация'});