# Message (notificación breve)
Barra de retroalimentación global ligera, montada en la parte superior de la página. LhMessage.success('Guardado') lista para usar; el tipo loading debe cerrarse manualmente.
Notificación breve
<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="showLoading">Cargando</LhButton>
<LhButton @click="showClose">Con botón de cierre</LhButton>
<LhButton @click="closeAll">Cerrar todas</LhButton>
</div>
<p class="demo-note">LhMessage.success('Guardado') es la forma más habitual; el tipo loading requiere cierre manual.</p>
</div>
</template>
<script>
export default {
methods: {
show(type) {
LhMessage[type]('Esta es una notificación de tipo ' + type)
},
showLoading() {
LhMessage.loading('Guardando…')
},
showClose() {
LhMessage({ content: 'Notificación cerrable manualmente', showClose: true })
},
closeAll() {
LhMessage.closeAll()
},
},
}
</script>
# API de servicio
LhMessage('Notificación normal') // info por defecto
LhMessage.success('Guardado') // info / success / warning / danger / loading
LhMessage({ content: 'Cerrable', showClose: true, closeLabel: 'Entendido' })
LhMessage.closeAll() // Cierra todas
# Message Props
| Propiedad | Descripción | Tipo | Predeterminado |
|---|---|---|---|
| content | Contenido de la notificación | string | — |
| type | Tipo | 'info' \| 'success' \| 'warning' \| 'danger' \| 'loading' | 'info' |
| 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 message.close del paquete de idioma) | string | — |
| sx | Propiedad de diseño rápido sx | — | — |
Consejo
El tipo loading no se cierra solo: cuando termine la operación, llama a LhMessage.closeAll() o conserva el manejador tú mismo.
← Alerta Notificación →
Copyright © 2024-2026 FengMo WenXue