Alert 警告框

概述

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

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "警告框",
  "usingComponents": {
    "fui-alert":"/components/firstui/fui-alert/fui-alert"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-alert":"components/firstui/fui-alert/fui-alert"
 }

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

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

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

注意：可通过css变量全局修改按钮type类型对应的颜色，css变量参考 自定义主题。

可关闭

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

<fui-alert closable title="An info alert" wx:if="{{show}}" bindclose="close"></fui-alert>

自定义图标

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

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

自定义颜色

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

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

Slots

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

Props

属性名	类型	说明	默认值	其他说明
type	String	类型，有效值：info, success, warn, waiting,clear	-	-
background	String	背景色，如果设置则type对应颜色失效	-	可通过css变量修改对应type的默认颜色
padding	String	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

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

示例预览