警告提示，展现需要关注的信息。

使用场景

• 当某个页面需要向用户显示警告的信息时
• 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭

基本使用

通过以下属性配置组件：

• type：设置主题类型，可选值：primary、success、error、warning、info
• description：设置组件的描述内容

<template>
	<un-alert description="山不在于高，有了神仙就出名" type="warning"></un-alert>
	<un-alert description="水不在深，有龙则灵" type="primary"></un-alert>
	<un-alert description="斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青" type="error"></un-alert>
	<un-alert description="谈笑有鸿儒，往来无白丁" type="info"></un-alert>
	<un-alert description="可以调素琴，阅金经" type="success"></un-alert>
</template>

深浅色

通过 effect 属性设置主题的深浅色调，可选值：light（浅色，默认）、dark（深色）、plain（镂空样式）。

<template>
	<un-alert description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有" type="info" effect="dark"></un-alert>
	<un-alert description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有" type="primary" effect="dark"></un-alert>
	<un-alert description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有" type="success" effect="dark"></un-alert>
	<un-alert description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有" type="warning" effect="dark"></un-alert>
	<un-alert description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有" type="error" effect="dark"></un-alert>
</template>

镂空样式

通过 effect="plain" 属性设置镂空样式，这是一种特殊的视觉效果。

<template>
	<un-alert description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有" type="info" effect="plain"></un-alert>
	<un-alert description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有" type="primary" effect="plain"></un-alert>
	<un-alert description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有" type="success" effect="plain"></un-alert>
	<un-alert description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有" type="warning" effect="plain"></un-alert>
	<un-alert description="南阳诸葛庐，西蜀子云亭。孔子云：何陋之有" type="error" effect="plain"></un-alert>
</template>

图标

通过 showIcon 设置是否显示图标，作用是让信息类型更加醒目。

<template>
	<un-alert description="六王毕，四海一；蜀山兀，阿房出" type="error" showIcon></un-alert>
	<un-alert description="覆压三百余里，隔离天日。骊山北构而西折，直走咸阳，二川溶溶，流入宫墙" type="error" effect="dark" showIcon></un-alert>
</template>

可关闭的警告提示

显示关闭按钮，点击可关闭警告提示。

• 通过 closable 参数配置是否可关闭

<template>
	<un-alert description="五步一楼，十步一阁；廊腰缦回，檐牙高啄；各抱地势，钩心斗角" type="primary" showIcon closable></un-alert>
	<un-alert description="盘盘焉，囷囷焉，蜂房水涡，矗不知其几千万落" type="error" closable showIcon></un-alert>
	<un-alert description="盘盘焉，囷囷焉，蜂房水涡，矗不知其几千万落" type="info" effect="dark" closable showIcon></un-alert>
	<un-alert description="盘盘焉，囷囷焉，蜂房水涡，矗不知其几千万落" type="warning" effect="dark" closable showIcon></un-alert>
</template>

带标题

通过同时设置 title 和 description 属性，可以创建带标题的警告提示。

<template>
	<un-alert title="妃嫔媵嫱，王子皇孙，辞楼下殿" description="长桥卧波，未云何龙？复道行空，不霁何虹" type="info" showIcon></un-alert>
	<un-alert title="辇来于秦，朝歌夜弦，为秦宫人。明星荧荧，开妆镜也" description="高低冥迷，不知西东。歌台暖响，春光融融；舞殿冷袖，风雨凄凄。一日之内，一宫之间，而气候不齐" type="info" effect="dark" showIcon></un-alert>
</template>

使用插槽

通过插槽可以自定义alert组件的各个部分，包括图标、标题和描述文字。

<template>
	<un-alert effect="dark">
		<template #icon>
			<un-icon name="home" size="22" color="#fff"></un-icon>
		</template>
		<template #title>
			使用插槽定义title
		</template>
		<template #description>
			使用插槽定义description
		</template>
	</un-alert>
</template>

API

Props

参数	说明	类型	默认值
title	标题文字	string	-
type	使用预设的颜色	string	warning
description	辅助性文字，颜色比 title 浅一点，字号也小一点	string	-
closable	关闭按钮（默认为叉号 icon 图标）	boolean	false
showIcon	是否显示左边的辅助图标	boolean	false
effect v4.1.0	警告提示的深浅色调	Enum	light
center	文字是否居中	boolean	false
fontSize	字体大小	string | number	14

Events

事件名	说明	类型
click	点击组件时触发	Function
close	点击关闭按钮时触发	Function

Slots

名称	说明
icon	自定义图标
title v4.1.0	自定义标题文字
description v4.1.0	自定义描述文字

Scss 变量

关于组件 SCSS 变量的用法，请参考 组件 SCSS 变量用法。

变量名	默认值	说明
$un-alert-padding	8px 10px	组件内边距
$un-alert-radius	$radius-base	组件圆角
$un-alert-title-font-size	$text-base	标题字体大小
$un-alert-title-color	$text-color-inverted	标题文字颜色
$un-alert-title-font-weight	bold	标题字体粗细
$un-alert-title-margin-bottom	2px	标题底部间距
$un-alert-desc-font-size	$text-base	描述文字字体大小
$un-alert-desc-color	$text-color-inverted	描述文字颜色
$un-alert-close-top	11px	关闭按钮顶部距离
$un-alert-close-right	10px	关闭按钮右侧距离