Уведомление

Карточные уведомления в верхнем правом углу (настраивается на любой из четырёх углов); подходят для развёрнутой обратной связи по узлам процесса.

Уведомление

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton @click="show('info')">Информация</LhButton>
      <LhButton type="primary" @click="show('success')">Успех</LhButton>
      <LhButton type="warning" @click="show('warning')">Предупреждение</LhButton>
      <LhButton type="danger" @click="show('danger')">Опасность</LhButton>
      <LhButton @click="showClickable">Кликабельная карточка</LhButton>
      <LhButton @click="closeAll">Закрыть все</LhButton>
    </div>
    <p class="demo-note">LhNotification.success({ title, content }); после передачи onClick карточка становится кликабельной.</p>
  </div>
</template>

<script>
export default {
  methods: {
    show(type) {
      LhNotification[type]({
        title: 'Уведомление: ' + type,
        content: 'Узел процесса оцифровки произведения «Путешествие по горам и рекам» обновлён.',
        showClose: true,
      })
    },
    showClickable() {
      LhNotification.info({
        title: 'Нажмите на меня',
        content: 'После передачи onClick вся карточка становится кликабельной.',
        onClick() {
          LhMessage.success('Карточка нажата')
        },
      })
    },
    closeAll() {
      LhNotification.closeAll()
    },
  },
}
</script>

Сервисный API

LhNotification.success({ title: 'Сбор завершён', content: '120 произведений архивировано' })
// info / success / warning / danger; второй аргумент — options
LhNotification.info({ title: 'Нажмите', content: '...', onClick: () => {} })
LhNotification.closeAll()

Notification Props

Проп	Описание	Тип	По умолчанию
type	Тип	'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	Заголовок	string	—
content	Основной текст	string	—
showClose	Показывать ли кнопку закрытия	boolean	false
closeLabel	Имя кнопки закрытия для доступности (если не передано, берётся notification.close из языкового пакета)	string	—
onClick	После передачи карточка становится кликабельной	() => void	—
sx	Проп sx для быстрого макета	—	—

Совет

Позиция появления уведомления (position: top-right / top-left / bottom-right / bottom-left) настраивается в options вызова openNotification; по умолчанию — верхний правый угол.