Pixelium Design

中文

English

中文

English

Appearance

提示 Alert ​

一个用于显示重要信息或操作反馈的消息栏组件。

提示类型 ​

Alert 支持多种类型：'info'（默认）、'success'、'warning'、'error'、'loading'、'normal'、'sakura'、'notice'。

Info
Notice
Success
Warning
Error
Sakura
Loading
Normal
<template>
	<px-space direction="vertical">
		<px-alert>Info</px-alert>
		<px-alert type="notice">Notice</px-alert>
		<px-alert type="success">Success</px-alert>
		<px-alert type="warning">Warning</px-alert>
		<px-alert type="error">Error</px-alert>
		<px-alert type="sakura">Sakura</px-alert>
		<px-alert type="loading">Loading</px-alert>
		<px-alert type="normal">Normal</px-alert>
	</px-space>
</template>

提示变体 ​

Alert 有两种样式变体：'plain'（默认）和 'primary'。

Info
Notice
Success
Warning
Error
Sakura
Loading
Normal
<template>
	<px-space direction="vertical">
		<px-alert variant="primary">Info</px-alert>
		<px-alert variant="primary" type="notice">Notice</px-alert>
		<px-alert variant="primary" type="success">Success</px-alert>
		<px-alert variant="primary" type="warning">Warning</px-alert>
		<px-alert variant="primary" type="error">Error</px-alert>
		<px-alert variant="primary" type="sakura">Sakura</px-alert>
		<px-alert variant="primary" type="loading">Loading</px-alert>
		<px-alert variant="primary" type="normal">Normal</px-alert>
	</px-space>
</template>

文本对齐 ​

通过设置 textAlign 控制内容对齐：'start'、'center' 或 'end'。

Start
Center
End
<template>
	<px-space direction="vertical">
		<px-alert>Start</px-alert>
		<px-alert text-align="center">Center</px-alert>
		<px-alert text-align="end">End</px-alert>
	</px-space>
</template>

标题 ​

可使用 title 属性或 title 插槽在内容上方显示显眼的标题。

Title
Info
Title
Notice
Title
Success
Title
Warning
Title
Error
Title
Sakura
Title
Loading
Title
Normal
<template>
	<px-space direction="vertical">
		<px-alert title="Title">Info</px-alert>
		<px-alert title="Title" type="notice">Notice</px-alert>
		<px-alert title="Title" type="success">Success</px-alert>
		<px-alert title="Title" type="warning">Warning</px-alert>
		<px-alert title="Title" type="error">Error</px-alert>
		<px-alert title="Title" type="sakura">Sakura</px-alert>
		<px-alert title="Title" type="loading">Loading</px-alert>
		<px-alert title="Title" type="normal">Normal</px-alert>
	</px-space>
</template>

可关闭 ​

设置 closable 会显示关闭图标，点击时组件会触发 close 事件。

Info
Success
Notice
Warning
Error
Sakura
Loading
Normal
<template>
	<px-space direction="vertical">
		<px-alert closable @close="closeHandler('info')">Info</px-alert>
		<px-alert closable type="success" @close="closeHandler('success')">Success</px-alert>
		<px-alert closable type="notice" @close="closeHandler('notice')">Notice</px-alert>
		<px-alert closable type="warning" @close="closeHandler('warning')">Warning</px-alert>
		<px-alert closable type="error" @close="closeHandler('error')">Error</px-alert>
		<px-alert closable type="sakura" @close="closeHandler('sakura')">Sakura</px-alert>
		<px-alert closable type="loading" @close="closeHandler('loading')">Loading</px-alert>
		<px-alert closable type="normal" @close="closeHandler('normal')">Normal</px-alert>
	</px-space>
</template>
<script lang="ts" setup>
const closeHandler = (type: string) => {
	$message[type](`Closed ${type} alert`)
}
</script>

图标 ​

通过设置 iconPlacement 设置图标位置：'start' 或 'text-leading'；通过 showIcon 控制图标显示；可通过 icon 插槽自定义图标。

No Icon
Custom Icon
Text Center & Icon Start
Text End & Icon Start 
<template>
	<px-space direction="vertical">
		<px-alert :show-icon="false"> No Icon </px-alert>
		<px-alert type="success">
			Custom Icon
			<template #icon>
				<IconAt />
			</template>
		</px-alert>
		<px-alert type="warning" icon-placement="start" text-align="center">
			Text Center & Icon Start
		</px-alert>
		<px-alert type="error" icon-placement="start" text-align="end">
			Text End & Icon Start
		</px-alert>
	</px-space>
</template>

<script lang="ts" setup>
import { IconAt } from '@pixelium/web-vue/icon-hn/es'
</script>

自定义颜色 ​

设置 color 可以自定义主色，组件会基于此生成完整色板，该色板优先于主题预设。支持类似 CSS 的 'rgb(r, g, b)'、'rgba(r, g, b, a)' 字符串，和 3、4、6、8 位十六进制。

#3B82F6
#10B981
#F59E0B
#EF4444 
<template>
	<px-space direction="vertical">
		<px-alert color="#3B82F6"> #3B82F6 </px-alert>
		<px-alert color="#10B981" type="success"> #10B981 </px-alert>
		<px-alert color="#F59E0B" type="warning"> #F59E0B </px-alert>
		<px-alert color="#EF4444" type="error"> #EF4444 </px-alert>
	</px-space>
</template>

形状 & 圆角边框 ​

通过 shape 控制提示组件形状。

borderRadius 设置 Alert 的圆角，优先级高于 shape，与 CSS border-radius 行为一致：

  • 单值或长度为 1 的数组 → 同时应用到四个角
  • 长度为 2 的数组 → [左上 & 右下, 右上 & 左下]
  • 长度为 3 的数组 → [左上, 右上 & 左下, 右下]
  • 长度为 4 的数组 → 按顺时针从左上角依次应用
Info
Success
Sakura
<template>
	<px-space direction="vertical">
		<px-alert shape="round">Info</px-alert>
		<px-alert shape="round" type="success">Success</px-alert>
		<px-alert :border-radius="12" type="sakura">Sakura</px-alert>
	</px-space>
</template>

API ​

AlertProps ​

属性类型可选默认值描述版本
borderRadiusNumberOrPercentage | NumberOrPercentage[]是圆角半径，优先级高于 shape，行为与 CSS border-radius 一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。0.1.0
shape'rect' | 'round'是'rect'组件形状，可选 'rect' 或 'round'。0.1.0
variant'primary' | 'plain'是'plain'样式变体，'primary' 或 'plain'。0.1.0
type'info' | 'success' | 'warning' | 'error' | 'loading' | 'normal' | 'sakura' | 'notice'是'primary'警告的类型（主题）。0.1.0
textAlign'start' | 'center' | 'end'是'start'文本对齐，'start' / 'center' / 'end'。0.1.0
titlestring是标题文本或通过 title 插槽提供。0.1.0
colorstring是自定义主色，支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。0.1.0
closableboolean是false是否显示关闭图标。0.1.0
iconPlacement'start' | 'text-leading'是'text-leading'图标位置，'start' 或 'text-leading'。0.1.0
showIconboolean是'true'是否显示图标。0.1.0
pollSizeChangeboolean是false是否启用尺寸轮询，可能影响性能。0.1.0

AlertEvents ​

事件参数描述版本
closee: MouseEvent关闭图标点击事件，回调参数为 MouseEvent。0.1.0

AlertSlots ​

插槽参数描述版本
default内容插槽。0.1.0
title标题插槽。0.1.0
icon图标插槽。0.1.0

NumberOrPercentage ​

ts
export type NumberOrPercentage = number | `${number}%`