Alert 警告提示

示例

颜色

系统将在 10 分钟后自动刷新页面

检测到新的公告，请及时查看

本页面启用了实验性功能，请谨慎操作

保存成功，配置已生效

当前网络不稳定，提交可能延迟

支付失败，请检查后重试

<script setup lang="ts">
import { Alert } from '@fluxuijs/core'
</script>

<template>
  <div class="doc-example-stack">
    <Alert color="default">系统将在 10 分钟后自动刷新页面</Alert>
    <Alert color="primary">检测到新的公告，请及时查看</Alert>
    <Alert color="secondary">本页面启用了实验性功能，请谨慎操作</Alert>
    <Alert color="success">保存成功，配置已生效</Alert>
    <Alert color="warning">当前网络不稳定，提交可能延迟</Alert>
    <Alert color="danger">支付失败，请检查后重试</Alert>
  </div>
</template>

变体

提交成功，数据已保存

请先完成手机号验证

检测到新的版本可更新

当前为只读模式，部分操作不可用

<script setup lang="ts">
import { Alert } from '@fluxuijs/core'
</script>

<template>
  <div class="doc-example-stack">
    <Alert color="primary" variant="solid">提交成功，数据已保存</Alert>
    <Alert color="primary" variant="bordered">请先完成手机号验证</Alert>
    <Alert color="primary" variant="flat">检测到新的版本可更新</Alert>
    <Alert color="primary" variant="faded">当前为只读模式，部分操作不可用</Alert>
  </div>
</template>

圆角

无圆角样式示例

小圆角样式示例

中圆角样式示例

大圆角样式示例

胶囊圆角样式示例

<script setup lang="ts">
import { Alert } from '@fluxuijs/core'
</script>

<template>
  <div class="doc-example-stack">
    <Alert radius="none">无圆角样式示例</Alert>
    <Alert radius="sm">小圆角样式示例</Alert>
    <Alert radius="md">中圆角样式示例</Alert>
    <Alert radius="lg">大圆角样式示例</Alert>
    <Alert radius="full">胶囊圆角样式示例</Alert>
  </div>
</template>

可关闭

资料已保存，你可以关闭这条提示

请在提交前检查必填字段

<script setup lang="ts">
import { Alert } from '@fluxuijs/core'
</script>

<template>
  <div class="doc-example-stack">
    <Alert color="success" closable>资料已保存，你可以关闭这条提示</Alert>
    <Alert color="warning" variant="bordered" closable>请在提交前检查必填字段</Alert>
  </div>
</template>

自定义图标

审核已通过，配置可以发布

当前策略即将过期，请尽快更新

<script setup lang="ts">
import { Alert } from '@fluxuijs/core'
import { BadgeCheck, TriangleAlert } from 'lucide-vue-next'
</script>

<template>
  <div class="doc-example-stack">
    <Alert color="success" variant="flat">
      <template #icon>
        <BadgeCheck />
      </template>
      审核已通过，配置可以发布
    </Alert>

    <Alert color="warning" variant="bordered">
      <template #icon>
        <TriangleAlert />
      </template>
      当前策略即将过期，请尽快更新
    </Alert>
  </div>
</template>

隐藏左侧图标

当前服务负载较高，响应时间可能增加

你的会话将在 3 分钟后过期

风险校验未通过，请联系管理员

<script setup lang="ts">
import { Alert } from '@fluxuijs/core'
</script>

<template>
  <div class="doc-example-stack">
    <Alert color="default" hiddenIcon>
      当前服务负载较高，响应时间可能增加
    </Alert>

    <Alert color="warning" variant="bordered" hiddenIcon>
      你的会话将在 3 分钟后过期
    </Alert>

    <Alert color="danger" variant="faded" hiddenIcon>
      风险校验未通过，请联系管理员
    </Alert>
  </div>
</template>

API

Props

名称	类型	默认值	说明
color	AlertProps['color']	'default'	颜色语义
variant	AlertProps['variant']	'flat'	展示变体
radius	AlertProps['radius']	'md'	圆角规格
hiddenIcon	boolean	false	是否隐藏左侧图标
closable	boolean	false	是否显示关闭按钮

类型定义

AlertColor='default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'

AlertVariant='solid' | 'bordered' | 'flat' | 'faded'

AlertRadius='none' | 'sm' | 'md' | 'lg' | 'full'

Slots

名称	说明
default	文本内容区域
icon	左侧图标区域，默认是 Bell 图标

Events

名称	说明
无	当前版本未定义 emits