FxAlert 警告提示

用于页面中展示重要的提示信息。不依赖任何 UI 框架，颜色走 @fx/styles 的 --color-* token。

基础用法

type 控制语义色，show-icon 显示对应图标。

<template>
  <div class="col">
    <FxAlert title="success alert" type="success" show-icon />
    <FxAlert title="info alert" type="info" show-icon />
    <FxAlert title="warning alert" type="warning" show-icon />
    <FxAlert title="error alert" type="error" show-icon />
  </div>
</template>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

主题

effect 切换 light（浅色底）/ dark（实色底）。

<template>
  <div class="col">
    <FxAlert title="light theme" type="success" effect="light" show-icon />
    <FxAlert title="dark theme" type="success" effect="dark" show-icon />
  </div>
</template>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

自定义关闭按钮

closable 控制是否可关闭；close-text 自定义关闭按钮文字。

<template>
  <div class="col">
    <FxAlert title="不可关闭的 alert" type="success" :closable="false" show-icon />
    <FxAlert title="自定义 close-text" type="info" close-text="Got it" show-icon />
  </div>
</template>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

图标

show-icon 显示默认 type 图标；icon 插槽自定义。

<template>
  <div class="col">
    <FxAlert title="with icon" type="success" show-icon />
    <FxAlert title="custom icon" type="warning" show-icon>
      <template #icon>
        <FxIcon name="ep:star-filled" :size="16" />
      </template>
    </FxAlert>
  </div>
</template>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

居中

center 使内容居中。

<template>
  <FxAlert title="居中文本" type="success" center show-icon />
</template>

带描述文字

description prop 或默认插槽补充描述；title 插槽自定义标题。

<template>
  <div class="col">
    <FxAlert title="with description" type="info" description="这是一段描述性文字" show-icon />
    <FxAlert type="success" show-icon>
      <template #title>with slot title</template>
      默认插槽作为描述内容
    </FxAlert>
  </div>
</template>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

带图标和描述

有描述时图标自动放大、标题字号加大以匹配。

<template>
  <FxAlert
    title="带图标和描述"
    type="warning"
    description="图标会自动放大，标题字号加大以匹配描述"
    show-icon
  />
</template>

API

Attributes

属性	说明	类型	默认值
title	标题	string	''
description	描述性文字	string	''
type	类型	'primary' | 'success' | 'info' | 'warning' | 'error'	info
closable	是否可关闭	boolean	true
close-text	关闭按钮文字（替换 x）	string	''
show-icon	是否显示图标	boolean	false
center	内容是否居中	boolean	false
effect	主题	'light' | 'dark'	light

Slots

插槽名	说明
default	描述内容（覆盖 description）
title	标题内容（覆盖 title）
icon	自定义图标（覆盖默认 type 图标）

Events

事件名	说明	类型
close	关闭时触发	(evt: MouseEvent) => void