Alert API
Эта страница предоставляет обзор API компонента Alert, детализируя его props, emits, слоты и exposed методы/состояния.
Props
Компонент Alert принимает следующие props:
| Prop | Default | Type | Описание |
|---|---|---|---|
modelValue | false | boolean | Управляет видимостью предупреждения. |
type | "success" | Type или undefined | Тип сообщения предупреждения. |
position | "top" | PositionShort или undefined | Позиция предупреждения на экране. |
size | "2xl" | Size или undefined | Размер предупреждения. |
title | "" | string | Заголовок предупреждения. |
subtitle | "" | string | Подзаголовок предупреждения. |
toTeleport | "body" | string | Селектор для телепортации предупреждения в определенный контейнер. |
class | "" | StyleClass | Пользовательский CSS класс для предупреждения. |
style | undefined | CSSProperties | Пользовательские inline стили для предупреждения. |
displayTime | 0 | string или number или undefined | Длительность отображения предупреждения (в миллисекундах). |
notAnimate | false | boolean | Отключает анимации для предупреждения. |
closeButton | false | boolean | Включает кнопку закрытия для предупреждения. |
Emits
Компонент Alert испускает следующие события:
| Emit | Payload | Описание |
|---|---|---|
update:modelValue | boolean | Испускается, когда обновляется prop modelValue. |
Слоты
Компонент Alert предоставляет следующие слоты:
| Слот | Payload | Описание |
|---|---|---|
default | VNode[] | Слот для добавления пользовательского контента внутри предупреждения. |
Expose
Компонент Alert предоставляет следующие методы и состояния через ref:
| Expose | Тип | Описание |
|---|---|---|
isVisible | boolean | Текущее состояние видимости предупреждения. |
type | AlertProps["type"] | Текущий тип предупреждения. |
title | AlertProps["title"] | Текущий заголовок предупреждения. |
subtitle | AlertProps["subtitle"] | Текущий подзаголовок предупреждения. |
displayTime | number | Текущая длительность отображения предупреждения (в миллисекундах). |
isCloseButton | AlertProps["closeButton"] | Указывает, включена ли кнопка закрытия. |
position | AlertProps["position"] | Текущая позиция предупреждения. |
classesStyle | Record<"body" | "icon" | "title" | "subtitle" | "button" | "buttonIcon", StyleClass> | CSS классы для различных частей предупреждения. |
size | StyleClass | Текущий размер предупреждения. |
classBase | StyleClass | Базовый CSS класс для предупреждения. |
close | () => void | Закрывает предупреждение. |
Типы
Type
Prop type определяет визуальный стиль и намерение предупреждения. Он принимает следующие значения:
| Значение | Описание |
|---|---|
"success" | Представляет успешную операцию. Стилизован зелеными цветами. |
"warning" | Представляет предупреждающее сообщение. Стилизован желтыми или янтарными цветами для указания на предостережение. |
"info" | Представляет информационный контент. Стилизован синими цветами для предоставления нейтральных или полезных деталей. |
"error" | Представляет ошибку или критическую проблему. Стилизован красными цветами для обозначения проблемы. |
"neutral" | Представляет нейтральное сообщение. Стилизован серыми или нейтральными тонами для общих предупреждений. |
Size
Prop size принимает следующие значения для определения ширины диалога:
xs, sm, md, lg, xl, 2xl (по умолчанию), 3xl, 4xl, 5xl, 6xl, 7xl
PositionShort
Тип PositionShort определяет относительное положение предупреждения на экране:
| Значение | Описание |
|---|---|
"center" | Центрирует предупреждение на экране. |
"top" | Позиционирует предупреждение в верхней части экрана. |
"bottom" | Позиционирует предупреждение в нижней части экрана. |
"left" | Позиционирует предупреждение на левой стороне экрана. |
"right" | Позиционирует предупреждение на правой стороне экрана. |
"bottom-left" | Позиционирует предупреждение в левом нижнем углу. |
"top-left" | Позиционирует предупреждение в левом верхнем углу. |
"bottom-right" | Позиционирует предупреждение в правом нижнем углу. |
"top-right" | Позиционирует предупреждение в правом верхнем углу. |