Alert 警告框

源码位置：components/fui-alert/fui-alert.vue

用于展示提示内容，可设置图标、标题、描述和关闭按钮。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 警告提示 -->
<fui-alert type="info" title="提示" desc="请检查输入内容"></fui-alert>

属性

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

事件

事件	说明	回调参数
leftClick	点击左侧区域	{}
click	点击内容区域	{}
close	点击关闭图标	{}

关闭事件只通知页面，显示状态需要由页面自行控制。

插槽

插槽	说明
default	左侧自定义内容，配合 isLeft 使用
content	内容区域的自定义内容
right	右侧自定义内容

平台说明

非 nvue 平台的类型背景可通过 CSS 变量调整，nvue 使用颜色配置。