Alert 提示

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

?

名称	分类	说明	类型	默认值
type	? 风格	类型	'success' | 'warning' | 'info' | 'danger'	'info'
center	? 风格	文字是否居中	boolean	false
show-icon	? 风格	是否显示图标	boolean	false
effect	? 风格	主题样式	'light' | 'dark'	'light'
outline	? 风格	轮廓边框样式	boolean	false
dash	? 风格	虚线边框样式	boolean	false
color	? 颜色	自定义十六进制颜色	string	—
closable	? 行为	是否可关闭	boolean	true
title	? 内容	标题	string	—
description	? 内容	描述文本	string	—
close	? 事件	关闭时触发	() => void	—
default	? 插槽	默认内容		—
title	? 插槽	标题内容		—

基础用法

使用 type 属性来定义不同类型的提示。

<template>
  <h2>通过 slot 传入内容</h2>
  <div style="max-width: 600px">
    <px-alert type="success">Success alert</px-alert>
    <px-alert type="info">Info alert</px-alert>
    <px-alert type="warning">Warning alert</px-alert>
    <px-alert type="danger">Error alert</px-alert>
  </div>
  <h2>通过 prop 传入内容</h2>
  <div style="max-width: 600px">
    <px-alert type="success" title="Success alert" />
    <px-alert type="info" title="Info alert" />
    <px-alert type="warning" title="Warning alert" />
    <px-alert type="danger" title="Error alert" />
  </div>
</template>

主题

使用 effect 属性来设置主题样式：light 或 dark。

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

可关闭

使用 closable 属性来设置是否可关闭。

<script setup>
function handleClose() {}
</script>
<template>
  <div class="basic block">
    <px-alert title="Unclosable alert" type="success" :closable="false" />
    <px-alert title="Alert with callback" type="warning" @close="handleClose" />
  </div>
</template>

显示图标

使用 show-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>

带有描述

使用 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>

文字居中

使用 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>

轮廓样式

使用 outline 属性来显示实线边框、透明背景。

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

虚线样式

使用 dash 属性来显示虚线边框、浅色背景。

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

自定义颜色

使用 color 属性来设置自定义十六进制颜色。可与默认、轮廓和虚线样式搭配使用。

<template>
  <div style="max-width: 600px">
    <px-alert title="Custom color alert" color="#8b5cf6" />
    <px-alert title="Outline with custom color" color="#8b5cf6" outline />
    <px-alert title="Dash with custom color" color="#8b5cf6" dash />
    <px-alert title="Custom orange alert" color="#f97316" />
  </div>
</template>