SAlert

Оповещение о произошедшем событии.

В чем отличие от аналогов?

В отличие от популярных библиотек компонентов для Vue3:

1. Упрощено до одного метода, не требует добавлять элемент в шаблон.

Что будет ценно улучшить

1. Добавить возможность собирать серию оповещений друг под другом.

Базовый пример

Информационное оповещение:

Информация

<SButton @click="SAlert.info('Информация')">Информация</SButton>

<template>
    <SButton @click="SAlert.info('Информация')">Информация</SButton>
</template>
<script setup>
import { SAlert } from 'startup-ui'
</script>

Оповещение об успешном действии:

Успех

<SButton color="green" @click="SAlert.success('Успех')">Успех</SButton>

<template>
    <SButton color="green" @click="SAlert.success('Успех')">Успех</SButton>
</template>
<script setup>
import { SAlert } from 'startup-ui'
</script>

Оповещение об ошибке:

Ошибка

<SButton color="red" @click="SAlert.error('Ошибка')">Ошибка</SButton>

<template>
    <SButton color="red" @click="SAlert.error('Ошибка')">Ошибка</SButton>
</template>
<script setup>
import { SAlert } from 'startup-ui'
</script>

Увеличенное время до закрытия

По умолчанию оповещения закрываются через 5 секунд. Другое время закрытия можно задать параметром closeAfter:

Информация

<SButton @click="closeWithDelay">Информация</SButton>

<template>
    <SButton @click="closeWithDelay">Информация</SButton>
</template>
<script setup>
import { SAlert } from 'startup-ui'

function closeWithDelay() {
    SAlert.info('Закроется через 5 секунд', {
        closeAfter: 5000,
    })
}
</script>

Интерфейс компонента

Методы

• SAlert.info(text: string, options?: AlertOptions) — информационное оповещение
• SAlert.success(text: string, options?: AlertOptions) — оповещение об успехе
• SAlert.error(text: string, options?: AlertOptions) — оповещение об ошибке
• SAlert.open(text: string, options?: AlertOptions) — базовый метод (тип задаётся в options)

AlertOptions

Название	Тип	По умолчанию	Описание
type	'success' | 'info' | 'error'	'info'	Визуальный стиль оповещения.
closeAfter	number	3000	Время в миллисекундах до автозакрытия.