Notification 通知

右上角（可四角）的通知卡片，承載需要稍作停留的回饋資訊：標題 / 內文 / 語意圖示 / 可關閉 / 自動消失 / 堆疊。命令式服務 API（LhNotification.success(...)）。

基礎用法

vue

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

const showBasic = () => {
  LhNotification.info({ title: '同步完成', content: '3 项变更已同步到云端' })
}
</script>

<template>
  <LhButton @click="showBasic">打开通知</LhButton>
</template>

vue

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

export default {
  methods: {
    showBasic() {
      LhNotification.info({ title: '同步完成', content: '3 项变更已同步到云端' })
    },
  },
}
</script>

<template>
  <LhButton @click="showBasic">打开通知</LhButton>
</template>

語意類型

vue

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

const showInfo = () => LhNotification.info({ title: '提示', content: '内容' })
const showSuccess = () => LhNotification.success({ title: '成功', content: '备份已完成' })
const showWarning = () => LhNotification.warning({ title: '警告', content: '存储空间不足' })
const showDanger = () => LhNotification.danger({ title: '失败', content: '网络连接中断' })
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">信息</LhButton>
    <LhButton @click="showSuccess">成功</LhButton>
    <LhButton @click="showWarning">警告</LhButton>
    <LhButton @click="showDanger">危险</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showInfo() {
      LhNotification.info({ title: '提示', content: '内容' })
    },
    showSuccess() {
      LhNotification.success({ title: '成功', content: '备份已完成' })
    },
    showWarning() {
      LhNotification.warning({ title: '警告', content: '存储空间不足' })
    },
    showDanger() {
      LhNotification.danger({ title: '失败', content: '网络连接中断' })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showInfo">信息</LhButton>
    <LhButton @click="showSuccess">成功</LhButton>
    <LhButton @click="showWarning">警告</LhButton>
    <LhButton @click="showDanger">危险</LhButton>
  </div>
</template>

彈出位置

position 支援四角。

vue

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

const showAt = (position) => {
  LhNotification.info({ title: '位置示例', content: position, duration: 3000, position })
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">右上</LhButton>
    <LhButton @click="showAt('top-left')">左上</LhButton>
    <LhButton @click="showAt('bottom-right')">右下</LhButton>
    <LhButton @click="showAt('bottom-left')">左下</LhButton>
  </div>
</template>

vue

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

export default {
  methods: {
    showAt(position) {
      LhNotification.info({ title: '位置示例', content: position, duration: 3000, position })
    },
  },
}
</script>

<template>
  <div class="demo-notification-row">
    <LhButton @click="showAt('top-right')">右上</LhButton>
    <LhButton @click="showAt('top-left')">左上</LhButton>
    <LhButton @click="showAt('bottom-right')">右下</LhButton>
    <LhButton @click="showAt('bottom-left')">左下</LhButton>
  </div>
</template>

可點選通知

傳入 onClick 後卡片具備按鈕語意，可用 Tab 聚焦、Enter / Space 觸發。

vue

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

const showClickable = () => {
  LhNotification.info({
    title: '发现新版本',
    content: '点击查看更新日志',
    duration: 0,
    onClick: () => window.open('#', '_blank'),
  })
}
</script>

<template>
  <LhButton @click="showClickable">带动作的通知</LhButton>
</template>

vue

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

export default {
  methods: {
    showClickable() {
      LhNotification.info({
        title: '发现新版本',
        content: '点击查看更新日志',
        duration: 0,
        onClick: () => window.open('#', '_blank'),
      })
    },
  },
}
</script>

<template>
  <LhButton @click="showClickable">带动作的通知</LhButton>
</template>

關閉按鈕

show-close 控制關閉按鈕顯隱（預設顯示），close-label 自訂其無障礙名稱。

vue

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

const notifyClosable = () => LhNotification.info({ title: '提示', content: '可手动关闭', showClose: true, closeLabel: '知道了，关闭' })
const notifyNoClose = () => LhNotification.info({ title: '提示', content: '只能等待自动关闭', showClose: false })
</script>

<template>
  <LhButton @click="notifyClosable">显示关闭按钮</LhButton>
  <LhButton @click="notifyNoClose">无关闭按钮</LhButton>
</template>

vue

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

export default {
  methods: {
    notifyClosable() {
      LhNotification.info({ title: '提示', content: '可手动关闭', showClose: true, closeLabel: '知道了，关闭' })
    },
    notifyNoClose() {
      LhNotification.info({ title: '提示', content: '只能等待自动关闭', showClose: false })
    },
  },
}
</script>

<template>
  <LhButton @click="notifyClosable">显示关闭按钮</LhButton>
  <LhButton @click="notifyNoClose">无关闭按钮</LhButton>
</template>

API

LhNotification Props

屬性名	說明	類型	預設值
type	語意類型	`"success" \| "warning" \| "error" \| "info" \| "danger"`	`'info'`
title	標題	`string`	—
content	內文內容	`string`	—
showClose	是否顯示關閉按鈕	`boolean`	`true`
closeLabel	關閉按鈕的無障礙名稱（未傳時取語言包 `notification.close`）	`string`	—
onClick	點選卡片回呼（傳入後卡片以 button 語意呈現）	`() => void`	—
sx	sx 快速版面配置屬性	`LhSxProps`	—

服務方法：LhNotification(options) / LhNotification.success/info/warning/danger(options)，傳回 { close } 句柄；另有 LhNotification.close(id)、LhNotification.closeAll() 與 LhNotification.config({ duration, offset, appendTo })。

Events

事件名	說明	回呼參數
close	點選條目上的關閉按鈕時觸發	—

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

Options

屬性名	說明	類型	預設值
title	標題	`string`	—
content	內文內容	`string`	—
type	語意類型	`'success' \| 'warning' \| 'error' \| 'info' \| 'danger'`	`'info'`
duration	自動關閉毫秒數，`0` 表示不自動關閉	`number`	`4500`
position	彈出位置	`'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left'`	`'top-right'`
showClose	是否顯示關閉按鈕	`boolean`	`true`
sx	sx 快速版面配置屬性	`LhSxProps`	—
onClick	點選卡片回呼	`() => void`	—
onClose	關閉後的回呼	`() => void`	—

無障礙

每個位置的容器為 role="region" + aria-live="polite"，新通知溫和播報，不搶焦點
傳入 onClick 的卡片為 role="button"、可 Tab 聚焦，Enter / Space 觸發
關閉按鈕帶 aria-label（語言包 notification.close，可用 closeLabel 覆寫）
堆疊位移由 CSS 過渡；動效尊重 prefers-reduced-motion

類型定義

本元件對外匯出的 TypeScript 類型結構如下（自動提取自 packages/components/notification/src/types.ts 與 @lh-ui/share/core/* 原始碼，點選各條目展開檢視完整定義；屬性說明見上方 Props 表）：

LhNotificationOptions

/** 服務選項 */
export interface LhNotificationOptions {
  /** 標題 */
  title: string
  /** 內文內容 */
  content?: string
  /** 語意類型，預設 info */
  type?: LhNotificationType
  /** 自動關閉毫秒數，0 表示不自動關閉（預設 4500） */
  duration?: number
  /** 彈出位置（預設 top-right） */
  position?: LhNotificationPosition
  /** 是否顯示關閉按鈕（預設 true） */
  showClose?: boolean
  /** sx 快速版面配置屬性 */
  sx?: LhSxProps
  /** 點選卡片回呼（傳入後卡片可聚焦、以 button 語意呈現） */
  onClick?: () => void
  /** 關閉（含自動與手動）後的回呼 */
  onClose?: () => void
}

LhNotificationHandle

/** 服務句柄 */
export interface LhNotificationHandle {
  close: () => void
}

LhNotificationConfig

/** 全域預設設定項（LhNotification.config） */
export interface LhNotificationConfig {
  duration?: number
  offset?: number
  /** 掛載容器（預設 body） */
  appendTo?: string | HTMLElement
}

LhNotificationProps

/** 條目元件 props（服務內部渲染；也可宣告式單用） */
export interface LhNotificationProps {
  type?: LhNotificationType
  title: string
  content?: string
  showClose?: boolean
  /** 關閉按鈕的無障礙名稱（未傳時取語言包 notification.close） */
  closeLabel?: string
  /** 傳入後卡片可點選 */
  onClick?: () => void
  sx?: LhSxProps
}

LhNotificationType _{（來自 @lh-ui/share/core/notification）}

/** 通知語意類型（四語意，無 loading） */
export type LhNotificationType =
  (typeof LH_TYPES_CONST)[keyof typeof LH_TYPES_CONST]

LhNotificationRecord _{（來自 @lh-ui/share/core/notification）}

/** 單條通知在服務佇列中的記錄形態 */
export interface LhNotificationRecord {
  id: number
  type: LhNotificationType
  title: string
  content: string
  /** 自動關閉毫秒數，0 表示不自動關閉 */
  duration: number
  position: LhNotificationPosition
  showClose: boolean
  sx?: LhSxProps
  onClick?: () => void
  onClose?: () => void
}

LhNotificationPosition _{（來自 @lh-ui/share/core/notification）}

/** 通知彈出位置（四角） */
export type LhNotificationPosition =
  | 'top-right'
  | 'top-left'
  | 'bottom-right'
  | 'bottom-left'

常數

本元件用到的公開常數如下（可在 Props 表的「類型 / 預設值」列點選同名條目跳轉至此）：

LH_NOTIFICATION_POSITION_CONST _{（來自 @lh-ui/share/core/notification）}

/** 位置常數 */
export const LH_NOTIFICATION_POSITION_CONST = {
  'top-right': 'top-right',
  'top-left': 'top-left',
  'bottom-right': 'bottom-right',
  'bottom-left': 'bottom-left',
} as const

LH_NOTIFICATION_DURATION_DEFAULT _{（來自 @lh-ui/share/core/notification）}

/** 預設自動關閉時長（通知比訊息停留更久） */
export const LH_NOTIFICATION_DURATION_DEFAULT = 4500

LH_NOTIFICATION_GAP_DEFAULT _{（來自 @lh-ui/share/core/notification）}

/** 堆疊間距 px */
export const LH_NOTIFICATION_GAP_DEFAULT = 16

Notification 通知 ​

基礎用法 ​

語意類型 ​

彈出位置 ​

可點選通知 ​

關閉按鈕 ​

API ​

LhNotification Props ​

Events ​

Options ​

無障礙 ​

類型定義 ​

常數 ​