Message (глобальное сообщение)

Глобальная лёгкая обратная связь, обычно используется для однократного уведомления о результате операции. Основной API — императивный сервис (LhMessage.success(...)): очередь рендерится в отдельном контейнере, не зависит от дерева компонентов, при превышении лимита наиболее старое сообщение автоматически удаляется.

Базовое использование

vue

<script setup lang="ts">
import { LhMessage } from '@lh-ui/vue3'

const showBasic = () => {
  LhMessage('Это сообщение-подсказка')
}
</script>

<template>
  <LhButton @click="showBasic">Показать сообщение</LhButton>
</template>

vue

<script>
import { LhMessage } from '@lh-ui/vue3'

export default {
  methods: {
    showBasic() {
      LhMessage('Это сообщение-подсказка')
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">Показать сообщение</LhButton>
</template>

Семантические типы

Четыре семантических типа + loading; warning / danger / error объявляются немедленно с role="alert", остальные — мягко.

vue

<script setup lang="ts">
import { LhMessage } from '@lh-ui/vue3'

const showInfo = () => LhMessage.info('Информационное сообщение')
const showSuccess = () => LhMessage.success('Сохранено успешно')
const showWarning = () => LhMessage.warning('Обратите внимание на риск')
const showDanger = () => LhMessage.danger('Операция не удалась')
// loading по умолчанию не закрывается автоматически —
// закрытие выполняется через возвращаемый дескриптор
const showLoading = () => {
  const handle = LhMessage.loading('Идёт синхронизация…')
  setTimeout(() => handle.close(), 2000)
}
</script>

<template>
  <div class="demo-message-row">
    <LhButton @click="showInfo">Информация</LhButton>
    <LhButton @click="showSuccess">Успех</LhButton>
    <LhButton @click="showWarning">Предупреждение</LhButton>
    <LhButton @click="showDanger">Опасность</LhButton>
    <LhButton @click="showLoading">Загрузка (закрытие вручную)</LhButton>
  </div>
</template>

vue

<script>
import { LhMessage } from '@lh-ui/vue3'

export default {
  methods: {
    showInfo() {
      LhMessage.info('Информационное сообщение')
    },
    showSuccess() {
      LhMessage.success('Сохранено успешно')
    },
    showWarning() {
      LhMessage.warning('Обратите внимание на риск')
    },
    showDanger() {
      LhMessage.danger('Операция не удалась')
    },
    // loading по умолчанию не закрывается автоматически —
    // закрытие выполняется через возвращаемый дескриптор
    showLoading() {
      const handle = LhMessage.loading('Идёт синхронизация…')
      setTimeout(() => handle.close(), 2000)
    },
  },
}
</script>

<template>
  <div class="demo-message-row">
    <LhButton @click="showInfo">Информация</LhButton>
    <LhButton @click="showSuccess">Успех</LhButton>
    <LhButton @click="showWarning">Предупреждение</LhButton>
    <LhButton @click="showDanger">Опасность</LhButton>
    <LhButton @click="showLoading">Загрузка (закрытие вручную)</LhButton>
  </div>
</template>

Закрываемость и лимит очереди

showClose показывает кнопку закрытия; по умолчанию в очереди максимум 5 сообщений (настраивается через LhMessage.config({ max })), при превышении удаляется самое старое.

vue

<script setup lang="ts">
import { LhMessage } from '@lh-ui/vue3'

const showClosable = () => LhMessage.success('Сохранено успешно', { showClose: true })
// closeLabel задаёт доступное имя кнопки закрытия
const showCloseLabel = () => LhMessage.info('Проверьте входящие', { showClose: true, closeLabel: 'Понятно, закрыть' })
</script>

<template>
  <LhButton @click="showClosable">Ручное закрытие</LhButton>
  <LhButton @click="showCloseLabel">Свой текст закрытия</LhButton>
</template>

vue

<script>
import { LhMessage } from '@lh-ui/vue3'

export default {
  methods: {
    showClosable() {
      LhMessage.success('Сохранено успешно', { showClose: true })
    },
    // closeLabel задаёт доступное имя кнопки закрытия
    showCloseLabel() {
      LhMessage.info('Проверьте входящие', { showClose: true, closeLabel: 'Понятно, закрыть' })
    },
  },
}
</script>

<template>
  <LhButton @click="showClosable">Ручное закрытие</LhButton>
  <LhButton @click="showCloseLabel">Свой текст закрытия</LhButton>
</template>

Глобальная конфигурация

import { LhMessage } from '@lh-ui/vue3'

LhMessage.config({
  duration: 3000, // мс до автоматического закрытия (0 — не закрывать)
  max: 5,         // максимальное количество одновременно отображаемых сообщений
  offset: 20,     // отступ от верхней границы viewport, px
  appendTo: 'body', // контейнер монтирования (селектор или элемент)
})

API

LhMessage Props

Свойство	Описание	Тип	По умолчанию
content	Содержимое сообщения	`string`	—
type	Семантический тип	`"success" \| "warning" \| "error" \| "info" \| "danger" \| "loading"`	`'info'`
showClose	Показывать ли кнопку закрытия	`boolean`	`false`
closeLabel	Доступное имя кнопки закрытия (если не передано, берётся из языкового пакета `message.close`)	`string`	—
sx	Свойства быстрой разметки sx	`LhSxProps`	—

Сервисные методы: LhMessage(options) / LhMessage.success/info/warning/danger/loading(content, options?), возвращают дескриптор { close }; также есть LhMessage.close(id), LhMessage.closeAll() и LhMessage.config(options).

Events

Событие	Описание	Параметры обратного вызова
close	Срабатывает при нажатии на кнопку закрытия в сообщении	—

В императивном варианте закрытие (как автоматическое, так и ручное) отслеживается через коллбэк onClose в Options.

Options

Свойство	Описание	Тип	По умолчанию
content	Содержимое сообщения	`string`	—
type	Семантический тип	`'info' \| 'success' \| 'warning' \| 'danger' \| 'error' \| 'loading'`	`'info'`
duration	Мс до автоматического закрытия, `0` — не закрывать (для loading по умолчанию `0`)	`number`	`3000`
showClose	Показывать ли кнопку закрытия	`boolean`	`false`
offset	Отступ от верхней границы viewport, px	`number`	`20`
sx	Свойства быстрой разметки sx	`LhSxProps`	—
onClose	Коллбэк после закрытия	`() => void`	—

Доступность

Контейнер и сообщения являются live region: info / success / loading мягко объявляются через role="status", warning / danger / error — немедленно через role="alert"
Не блокирующий дизайн: фокус не перехватывается, поток клавиатурной навигации не перекрывается
Кнопка закрытия содержит aria-label (языковой пакет message.close, можно переопределить через closeLabel)
Анимация уважает prefers-reduced-motion

Определения типов

Структуры TypeScript, экспортируемые этим компонентом (автоматически извлечены из packages/components/message/src/types.ts и исходников @lh-ui/share/core/*; нажмите на каждый пункт, чтобы развернуть полное определение; описания свойств см. в таблице Props выше):

LhMessageOptions

/** Параметры сервиса: строковое содержимое + отображение и коллбэки */
export interface LhMessageOptions {
  /** Содержимое сообщения */
  content: string
  /** Семантический тип, по умолчанию info */
  type?: LhMessageType
  /** Мс до автоматического закрытия, 0 — не закрывать (для loading по умолчанию 0, для остальных 3000) */
  duration?: number
  /** Показывать ли кнопку закрытия */
  showClose?: boolean
  /** Отступ от верхней границы viewport, px (по умолчанию 20) */
  offset?: number
  /** Свойства быстрой разметки sx */
  sx?: LhSxProps
  /** Коллбэк после закрытия (как автоматического, так и ручного) */
  onClose?: () => void
}

LhMessageHandle

/** Дескриптор сервиса */
export interface LhMessageHandle {
  close: () => void
}

LhMessageProps

/** Props компонента сообщения (рендерится внутри сервиса; можно использовать и декларативно) */
export interface LhMessageProps {
  content: string
  type?: LhMessageType
  showClose?: boolean
  /** Доступное имя кнопки закрытия (если не передано, берётся из языкового пакета message.close) */
  closeLabel?: string
  sx?: LhSxProps
}

LhMessageConfig

/** Параметры глобальных значений по умолчанию (LhMessage.config) */
export interface LhMessageConfig {
  duration?: number
  max?: number
  offset?: number
  /** Контейнер монтирования (по умолчанию body) */
  appendTo?: string | HTMLElement
}

LhMessageType _{(из @lh-ui/share/core/message)}

/** Семантический тип сообщения (четыре семантики + loading) */
export type LhMessageType =
  | (typeof LH_MESSAGE_TYPE_CONST)[keyof typeof LH_MESSAGE_TYPE_CONST]

LhMessageRecord _{(из @lh-ui/share/core/message)}

/** Форма записи отдельного сообщения в очереди сервиса */
export interface LhMessageRecord {
  id: number
  type: LhMessageType
  content: string
  /** Мс до автоматического закрытия, 0 — не закрывать */
  duration: number
  showClose: boolean
  /** Отступ от верхней границы viewport, px */
  offset: number
  sx?: LhSxProps
  onClose?: () => void
}

Константы

Публичные константы, используемые этим компонентом (в столбцах «Тип / По умолчанию» таблицы Props можно перейти к одноимённой записи):

LH_MESSAGE_TYPE_CONST _{(из @lh-ui/share/core/message)}

/** Константа типов (добавляет loading к общим семантическим константам) */
export const LH_MESSAGE_TYPE_CONST = {
  ...LH_TYPES_CONST,
  /** @alias загрузка */
  loading: 'loading',
} as const

LH_MESSAGE_DURATION_DEFAULT _{(из @lh-ui/share/core/message)}

/** Длительность автоматического закрытия по умолчанию (семантика loading не закрывается автоматически) */
export const LH_MESSAGE_DURATION_DEFAULT = 3000

LH_MESSAGE_MAX_DEFAULT _{(из @lh-ui/share/core/message)}

/** Максимальное количество одновременно отображаемых сообщений; при превышении удаляется самое старое */
export const LH_MESSAGE_MAX_DEFAULT = 5

LH_MESSAGE_OFFSET_DEFAULT _{(из @lh-ui/share/core/message)}

/** Отступ от верхней границы viewport по умолчанию, px */
export const LH_MESSAGE_OFFSET_DEFAULT = 20

Message (глобальное сообщение) ​

Базовое использование ​

Семантические типы ​

Закрываемость и лимит очереди ​

Глобальная конфигурация ​

API ​

LhMessage Props ​

Events ​

Options ​

Доступность ​

Определения типов ​

Константы ​