Alert 警告提示

页面级静态警告（非命令式，区别于 Message）。语义与 live region 角色联动：warning/danger 用 role="alert" 立即播报，info/success 用 role="status" 温和播报。

基础用法

四种语义

一条中性提示。

操作已成功完成。

磁盘空间即将不足。

网络连接已中断。

<script setup lang="ts">
</script>

<template>
  <!-- 中性提示 -->
  <LhAlert>一条中性提示。</LhAlert>
  <!-- success -->
  <LhAlert type="success">操作已成功完成。</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">磁盘空间即将不足。</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">网络连接已中断。</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- 中性提示 -->
  <LhAlert>一条中性提示。</LhAlert>
  <!-- success -->
  <LhAlert type="success">操作已成功完成。</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">磁盘空间即将不足。</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">网络连接已中断。</LhAlert>
</template>

带图标与标题

图标与标题

保存成功

文档已同步到云端。

删除失败

该条目正被其他协作者编辑。

<script setup lang="ts">
</script>

<template>
  <!-- 保存成功 -->
  <LhAlert type="success" show-icon title="保存成功">文档已同步到云端。</LhAlert>
  <!-- 删除失败 -->
  <LhAlert type="danger" show-icon title="删除失败">该条目正被其他协作者编辑。</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- 保存成功 -->
  <LhAlert type="success" show-icon title="保存成功">文档已同步到云端。</LhAlert>
  <!-- 删除失败 -->
  <LhAlert type="danger" show-icon title="删除失败">该条目正被其他协作者编辑。</LhAlert>
</template>

可关闭

可关闭

点击右侧按钮关闭我。

自定义关闭按钮文案。

<script setup lang="ts">
</script>

<template>
  <!-- 默认关闭文案 -->
  <LhAlert closable>点击右侧按钮关闭我。</LhAlert>
  <!-- 自定义关闭文案 -->
  <LhAlert closable close-label="知道了">自定义关闭按钮文案。</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- 默认关闭文案 -->
  <LhAlert closable>点击右侧按钮关闭我。</LhAlert>
  <!-- 自定义关闭文案 -->
  <LhAlert closable close-label="知道了">自定义关闭按钮文案。</LhAlert>
</template>

朴素样式

朴素样式

浅底描边的朴素样式。

适合嵌在浅色背景上。

<script setup lang="ts">
</script>

<template>
  <!-- warning 朴素 -->
  <LhAlert type="warning" plain show-icon>浅底描边的朴素样式。</LhAlert>
  <!-- danger 朴素 -->
  <LhAlert type="danger" plain show-icon>适合嵌在浅色背景上。</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- warning 朴素 -->
  <LhAlert type="warning" plain show-icon>浅底描边的朴素样式。</LhAlert>
  <!-- danger 朴素 -->
  <LhAlert type="danger" plain show-icon>适合嵌在浅色背景上。</LhAlert>
</template>

Alert API

Props

属性	说明	类型	默认值
type	语义类型	"info" | "success" | "warning" | "danger"	'info'
title	标题（也可用 title 插槽）	string	—
closable	是否可关闭	boolean	false
showIcon	是否显示语义图标	boolean	false
plain	浅色朴素样式（白底描边）	boolean	false
closeLabel	关闭按钮的无障碍名称（未传时取语言包 alert.close）	string	—
sx	sx 快速布局属性	LhSxProps	—

Events

事件	说明	参数
close	点击关闭按钮后触发	—

Slots

插槽	说明
title	自定义标题
default	描述内容

无障碍

• warning/danger → role="alert"（立即播报）；info/success → role="status"（温和播报）
• 关闭按钮为真实 <button>，aria-label 取语言包 alert.close，:focus-visible 焦点环
• 语义色浅底由 color-mix() 从语义色派生，自动跟随主题与明暗模式

类型定义

本组件对外导出的 TypeScript 类型结构如下（自动提取自 packages/components/alert/src/types.ts 与 @lh-ui/share/core/* 源码，点击各条目展开查看完整定义；属性说明见上方 Props 表）：

LhAlertProps

export interface LhAlertProps {
  /** 语义类型 */
  type?: LhAlertType
  /** 标题（也可用 title 插槽） */
  title?: string
  /** 是否可关闭 */
  closable?: boolean
  /** 是否显示语义图标 */
  showIcon?: boolean
  /** 是否浅色朴素样式 */
  plain?: boolean
  /** 关闭按钮的无障碍名称（未传时取语言包 alert.close） */
  closeLabel?: string
  /** sx 快速布局属性 */
  sx?: LhSxProps
}

LhAlertType _{（来自 @lh-ui/share/core/alert）}

/** 警告语义类型 */
export type LhAlertType = 'info' | 'success' | 'warning' | 'danger'