Alert 警告框，可自定义颜色，图标等。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

通过 title 属性设置标题，type 属性设置类型。

 <wui-alert title="An info alert"></wui-alert>
 <wui-alert type="success" title="An success alert"></wui-alert>

可关闭

通过 closable 属性设置是否显示关闭按钮。

<wui-alert closable title="An info alert" v-if="show" @close="close"></wui-alert>

自定义图标

通过 isLeft 属性设置是否自定义左侧图标内容。

<wui-alert type="warn" isLeft spacing title="An info alert" size="28rpx" :marginTop="24">
	<wui-icon name="warning" :size="48" color="#fff"></wui-icon>
</wui-alert>

自定义颜色

通过 iconColor 属性设置图标颜色，background 属性设置背景色，color 属性设置标题颜色。

<wui-alert type="success" iconColor="#09BE4F" background="#fff" color="#181818" title="An info alert"></wui-alert>

Slots

插槽名称	说明
default	左侧区域，自定义内容展示
content	内容区域，自定义内容展示
right	右侧区域，自定义内容展示

Props

属性名	类型	说明	默认值	平台差异说明
type	String	类型，有效值：info, success, warn, waiting,clear	-	-
background	String	背景色，如果设置则type对应颜色失效	-	非Nvue端可通过css变量修改对应type的默认颜色
padding	Array	padding值：[上,右,下,左]	['20rpx', '32rpx']	-
marginTop	Number, String	margin-top值，单位rpx	0	-
marginBottom	Number, String	margin-bottom值，单位rpx	0	-
radius	String	圆角值	16rpx	-
iconColor	String	左侧icon颜色	#fff	-
iconSize	Number	左侧icon字体大小，单位px	22	-
closable	Boolean	是否显示关闭按钮	false	-
closeColor	String	关闭按钮颜色	#fff	-
closeSize	Number	关闭按钮icon字体大小，单位px	22	-
isLeft	Boolean	是否自定义左侧内容，默认图标失效	false	-
spacing	Boolean	内容是否与图标之间有间隔，isLeft为true时生效	false	-
title	String	标题内容	-	-
color	String	标题字体颜色	#fff	-
size	String	标题字体大小	14px	-
desc	String	描述内容	-	-
descColor	String	描述内容的字体颜色	#fff	-
descSize	String	描述内容字体大小	12px	-
single	Boolean	描述内容是否单行展示，超出隐藏	false	-

Events

事件名	说明	回调参数
@leftClick	点击左侧图标区域时触发	-
@click	点击内容区域时触发	-
@close	点击关闭按钮时触发	-