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

使用场景

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

基本使用

通过以下属性配置组件：

• 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	预设的主题颜色	Enum	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	自定义描述文字