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,     // 距視區頂部偏移 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	點選條目上的關閉按鈕時觸發	—

命令式用法中，關閉（含自動關閉與手動關閉）透過 Options 的 onClose 回呼感知。

Options

屬性名	說明	類型	預設值
content	訊息內容	`string`	—
type	語意類型	`'info' \| 'success' \| 'warning' \| 'danger' \| 'error' \| 'loading'`	`'info'`
duration	自動關閉毫秒數，`0` 表示不自動關閉（loading 預設 `0`）	`number`	`3000`
showClose	是否顯示關閉按鈕	`boolean`	`false`
offset	距視區頂部偏移 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
  /** 距視區頂部偏移 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
  /** 距視區頂部的偏移 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）}

/** 距視區頂部預設偏移 px */
export const LH_MESSAGE_OFFSET_DEFAULT = 20

Message 全域輕提示 ​

基礎用法 ​

語意類型 ​

可關閉與佇列上限 ​

全域設定 ​

API ​

LhMessage Props ​

Events ​

Options ​

無障礙 ​

類型定義 ​

常數 ​