Alert 提示

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

基础用法

Alert 组件不属于浮层元素, 不会自动消失或关闭

Alert 组件提供四种类型, 由 type 指定, 默认为 info

<template>
  <div style="max-width: 600px">
    <px-alert title="Success alert" type="success" />
    <px-alert title="Info alert" type="info" class="mt-20" />
    <px-alert title="Warning alert" type="warning" class="mt-20" />
    <px-alert title="Error alert" type="danger" class="mt-20" />
  </div>
</template>

主题

Alert 组件提供了两个主题: light 和 dark

通过设置 effect 属性来改变主题, 默认为 light

<template>
  <div style="max-width: 600px">
    <px-alert title="Success alert" effect="dark" type="success" />
    <px-alert title="Info alert" effect="dark" type="info" class="mt-20" />
    <px-alert
      title="Warning alert"
      effect="dark"
      type="warning"
      class="mt-20"
    />
    <px-alert title="Error alert" effect="dark" type="danger" class="mt-20" />
  </div>
</template>

不可关闭

可以设置 Alert 组件是否为可关闭状态, closable 属性决定 Alert 组件是否可关闭, 该属性接受一个 Boolean, 默认为 false

<template>
  <px-alert title="Unclosable alert" type="success" :closable="false" />
  <px-alert title="Alert with callback" type="warning" @close="handleClose" />
</template>
<script lang="ts" setup>
const handleClose = () => {
  console.log('Alert closed.')
}
</script>

使用图标

通过设置 show-icon 属性来显示 Alert 组件的 icon, 这能更有效地向用户展示你的显示意图

<template>
  <div style="max-width: 600px">
    <px-alert title="Success alert" type="success" show-icon />
    <px-alert title="Info alert" type="info" show-icon />
    <px-alert title="Warning alert" type="warning" show-icon />
    <px-alert title="Error alert" type="danger" show-icon />
  </div>
</template>

文字居中

使用 center 属性使文字水平居中

<template>
  <div style="max-width: 600px">
    <px-alert title="Success alert" type="success" center show-icon />
    <px-alert title="Info alert" type="info" center show-icon />
    <px-alert title="Warning alert" type="warning" center show-icon />
    <px-alert title="Error alert" type="danger" center show-icon />
  </div>
</template>

文字描述

为 Alert 组件添加一个更加详细的描述来使用户了解更多信息

除了 required 的 title 属性外, 可以设置 description 属性来添加描述, 称之为辅助性文字, 只能用于存放文本内容

<template>
  <div style="max-width: 600px">
    <px-alert
      title="With description"
      type="success"
      description="This is a description."
    />
  </div>
</template>

带图标和描述

这里提供一个带有图标和描述的例子

<template>
  <div style="max-width: 600px">
    <px-alert
      title="Success alert"
      type="success"
      description="More text description"
      show-icon
    />
    <px-alert
      title="Info alert"
      type="info"
      description="More text description"
      show-icon
    />
    <px-alert
      title="Warning alert"
      type="warning"
      description="More text description"
      show-icon
    />
    <px-alert
      title="Error alert"
      type="danger"
      description="More text description"
      show-icon
    />
  </div>
</template>

Alert API

Props

Name	Description	Type	Default
title	Alert 标题	string	—
type	Alert 类型	enum - success | warning | danger | info	info
description	描述性文本	string	—
closable	是否可以关闭	boolean	true
center	文字是否居中	boolean	false
show-icon	是否展示图标	boolean	false
effect	主题样式	enum - light | dark	light

Events

Name	Description	Type
close	关闭 Alert 时触发的事件	(event: MouseEvent) => void

Slots

Name	Description
default	默认插槽，用于设置 Alert 的内容描述
title	标题的内容

Expose

Name	Description	Type
open	打开 Alert	() => void
close	关闭 Alert	() => void