FinAlert 提示框

组件与命名规范：组件名主推 FAlert，别名导出 FinAlert。

用于页面中展示重要的提示信息。

基础用法

loading

---

API

FinAlertProps

属性名	类型	默认值	说明
type	'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'error'	'default'	提示类型
title	string	-	标题文本
description	string	-	描述性文本（可选）
showIcon	boolean	true	是否显示图标
closable	boolean	false	是否可关闭
closeText	string	-	关闭按钮文本（默认显示 × 图标）
center	boolean	false	是否居中显示
icon	string	-	自定义图标组件名

FinAlertEmits

事件名	回调参数	说明
close	() => void	关闭提示框时触发

FinAlertSlots

插槽名	说明
default	描述内容
title	标题内容

---

使用示例

基础提示

<template>
  <FinAlert type="primary" title="分级阈值说明：" description="不同机构层级可设置不同的阈值要求。" />
</template>

可关闭的提示

<template>
  <FinAlert 
    type="warning" 
    title="警告提示" 
    closable 
    @close="handleClose" 
  />
</template>

<script setup>
function handleClose() {
  console.log('提示框已关闭')
}
</script>

使用插槽

<template>
  <FinAlert type="info">
    <template #title>
      <span style="font-weight: bold">自定义标题</span>
    </template>
    这里是通过默认插槽传入的描述内容，支持 <strong>HTML 标签</strong>。
  </FinAlert>
</template>

---

类型定义

export type AlertType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'error'

export interface FinAlertProps {
  type?: AlertType
  title?: string
  showIcon?: boolean
  closable?: boolean
  closeText?: string
  center?: boolean
  description?: string
  icon?: string
}

export type FinAlertEmits = {
  close: []
}