Notificación

Notificaciones tipo tarjeta en la esquina superior derecha (configurables en las cuatro esquinas), adecuadas para retroalimentaciones más largas propias de los hitos de un proceso.

Notificación

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton @click="show('info')">Información</LhButton>
      <LhButton type="primary" @click="show('success')">Éxito</LhButton>
      <LhButton type="warning" @click="show('warning')">Advertencia</LhButton>
      <LhButton type="danger" @click="show('danger')">Peligro</LhButton>
      <LhButton @click="showClickable">Tarjeta clicable</LhButton>
      <LhButton @click="closeAll">Cerrar todas</LhButton>
    </div>
    <p class="demo-note">LhNotification.success({ title, content }); al pasar onClick, la tarjeta se vuelve clicable.</p>
  </div>
</template>

<script>
export default {
  methods: {
    show(type) {
      LhNotification[type]({
        title: 'Notificación de tipo ' + type,
        content: 'Se ha actualizado un hito del proceso de digitalización de Xi Shan Xing Lü Tu.',
        showClose: true,
      })
    },
    showClickable() {
      LhNotification.info({
        title: 'Pruébalo',
        content: 'Al pasar onClick, toda la tarjeta se vuelve clicable.',
        onClick() {
          LhMessage.success('Se ha hecho clic en la tarjeta')
        },
      })
    },
    closeAll() {
      LhNotification.closeAll()
    },
  },
}
</script>

API de servicio

LhNotification.success({ title: 'Captura completada', content: '120 obras archivadas' })
// info / success / warning / danger; el segundo argumento es options
LhNotification.info({ title: 'Haz clic', content: '...', onClick: () => {} })
LhNotification.closeAll()

Notification Props

Propiedad	Descripción	Tipo	Predeterminado
type	Tipo	'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	Título	string	—
content	Cuerpo del texto	string	—
showClose	Si se muestra el botón de cierre	boolean	false
closeLabel	Nombre de accesibilidad del botón de cierre (si no se pasa, se usa notification.close del paquete de idioma)	string	—
onClick	Al pasarlo, la tarjeta se vuelve clicable	() => void	—
sx	Propiedad de diseño rápido sx	—	—

Consejo

La posición de la notificación (position: top-right / top-left / bottom-right / bottom-left) se configura en las options de openNotification; por defecto, esquina superior derecha.