警告提示 Alert

用于页面中展示重要的提示信息，支持多种状态类型、可关闭、自定义图标等能力。

基础用法

通过 status 属性设置提示状态，支持 4 种类型：info - 信息（默认），success - 成功，warning - 警告，danger - 错误。

提示

提示

提示

提示

<template>
  <div style="margin-bottom: 10px" v-for="v in status">
    <bp-alert :status="v" title="提示"> </bp-alert>
  </div>
</template>

<script setup lang="ts">
const status = ["info", "success", "warning", "danger"];
</script>

详细内容

通过 content 属性添加详细的描述文本，用于提供更丰富的提示信息。

信息提示

这是一条信息提示的详细描述内容。

成功提示

操作已成功完成，请继续下一步操作。

警告提示

请注意，此操作可能会影响系统配置。

错误提示

操作失败，请检查网络连接后重试。

<template>
  <div class="alert-list">
    <bp-alert status="info" title="信息提示" content="这是一条信息提示的详细描述内容。" />
    <bp-alert status="success" title="成功提示" content="操作已成功完成，请继续下一步操作。" />
    <bp-alert status="warning" title="警告提示" content="请注意，此操作可能会影响系统配置。" />
    <bp-alert status="danger" title="错误提示" content="操作失败，请检查网络连接后重试。" />
  </div>
</template>

<style lang="scss" scoped>
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

可关闭

设置 show-close 属性显示关闭按钮，点击后触发 close 事件并自动隐藏。

可关闭的提示

操作成功

数据已保存。

<template>
  <div class="alert-list">
    <bp-alert status="info" title="可关闭的提示" show-close />
    <bp-alert status="success" title="操作成功" content="数据已保存。" show-close @close="onClose" />
  </div>
</template>

<script setup lang="ts">
const onClose = () => {
  console.log("alert closed");
};
</script>

<style lang="scss" scoped>
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

图标

默认根据状态类型自动展示图标。可通过 hide-icon 隐藏图标，也可通过 icon 属性传入自定义图标。

默认图标

隐藏图标

自定义图标

<template>
  <div class="alert-list">
    <bp-alert status="info" title="默认图标" />
    <bp-alert status="info" title="隐藏图标" hide-icon />
    <bp-alert status="info" title="自定义图标" :icon="IconHeart3Fill" />
  </div>
</template>

<script setup lang="ts">
import { IconHeart3Fill } from "birdpaper-icon";
</script>

<style lang="scss" scoped>
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

Alert 属性

title	提示标题	String	-	-
content	详细描述内容	String	-	-
status	提示状态类型	String	info	-
icon	自定义图标组件	Component	-	-
hide-border	是否隐藏边框	Boolean	-	-
hide-icon	是否隐藏图标	Boolean	-	-
show-close	是否显示关闭按钮	Boolean	-	-

Alert 事件

close

关闭提示时触发

-

-

Alert 插槽

content	自定义详细内容区域	-	-
close	自定义关闭按钮内容	-	-