Alert 提示

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

基础用法

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

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

<template>
  <div class="max-w-600">
    <px-alert title="Success alert" type="success" />
    <px-alert title="Info alert" type="info" />
    <px-alert title="Warning alert" type="warning" />
    <px-alert title="Error alert" type="danger" />
    <px-alert title="Sakura alert" type="sakura" />
  </div>
</template>

主题

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

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

<template>
  <div class="max-w-600">
    <px-alert title="Success alert" effect="dark" type="success" />
    <px-alert title="Info alert" effect="dark" type="info" />
    <px-alert title="Warning alert" effect="dark" type="warning" />
    <px-alert title="Error alert" effect="dark" type="danger" />
    <px-alert title="Sakura alert" effect="dark" type="sakura" />
  </div>
</template>

定制背景板-金属

Alert 组件新增定制风格背景板, 通过 iron 开启, 默认为金属配色

<template>
  <div class="max-w-600">
    <px-alert title="Iron alert" iron />
    <px-alert title="Unclosable alert" iron :closable="false" />
    <px-alert title="USE ICON" iron show-icon />
    <px-alert title="CENTER" iron center show-icon />
    <px-alert
      title="Icon with description"
      iron
      description="More text description"
      show-icon
    />
    <px-alert
      title="Icon with description"
      iron
      description="More text description"
      show-icon
      class="board-alert"
    />
    <px-alert
      title="Icon with description"
      iron
      description="More text description"
      show-icon
      class="other-alert"
    />
  </div>
</template>
<style scoped>
.board-alert {
  --px-corner-size: 6 !important;
  --px-block-size: 9 !important;
  padding: var(--px-alert-padding) !important;
  height: 300px;
}
.other-alert {
  --px-board-color: #733f38 !important;
  --px-color-1: #feac28 !important;
  --px-color-2: #f87622 !important;
  --px-shadow-color: #3f282f !important;
}
</style>

不可关闭

可以设置 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 class="max-w-600">
    <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 />
    <px-alert title="Sakura alert" type="sakura" show-icon />
  </div>
</template>

文字居中

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

<template>
  <div class="max-w-600">
    <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 />
    <px-alert title="Sakura alert" type="sakura" center show-icon />
  </div>
</template>

文字描述

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

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

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

带图标和描述

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

<template>
  <div class="max-w-600">
    <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
    />
    <px-alert
      title="Sakura alert"
      type="sakura"
      description="More text description"
      show-icon
    />
  </div>
</template>

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Alert API

Props

Name	Description	Type	Default
title	Alert 标题	string	-
type	Alert 类型	enum	info
description	描述性文本	string	-
effect	主题效果	enum	light
closable	是否可以关闭	boolean	true
center	文字是否居中	boolean	false
showIcon	是否显示图标	boolean	false
iron	定制背景1,默认金属配色	boolean	false

Events

Name	Description	Type
close	关闭事件	function

Slots

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

Expose

Name	Description	Type
open	打开 Alert	function
close	关闭 Alert	function