# Alert 警告框 V1.1.0+

概述

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

温馨提示

该组件内部使用了 fui-icon 图标组件，需要同时引入使用，非easycom模式使用时需要在组件内部手动引入。

# 支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

# 引入

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

第一种：在页面中引用、注册

import fuiAlert from "@/components/firstui/fui-alert/fui-alert.uvue"
export default {
	components:{
		fuiAlert
	}
}

1
2
3
4
5
6

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看快速上手。

如果不了解easycom，可先查看官网文档 (opens new window)。

# 代码演示

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

基础使用

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

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

1
2

可关闭

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

<fui-alert :closable="true" title="An info alert" v-if="visible" @close="close"></fui-alert>

export default {
	data() {
		return {
			visible: true
		}
	},
	methods: {
		close() {
			this.visible = false;
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12

自定义图标

通过 默认插槽 自定义左侧图标内容。

<fui-alert type="warning" :spacing="true" title="An info alert" :marginTop="24">
	<fui-icon name="warning" :size="48" color="#fff"></fui-icon>
</fui-alert>

1
2
3

自定义颜色

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

<fui-alert :spacing="true" iconColor="#09BE4F" background="#fff" color="#181818" title="An info alert" :marginTop="24">
	<fui-icon name="checkbox-fill" :size="48" color="#09BE4F"></fui-icon>
</fui-alert>

1
2
3

# Slots

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

# Props

属性名	类型	说明	默认值	平台差异说明
type	String	类型，有效值：info, success, warning, waiting,danger	-	-
background	String	背景色，如果设置则type对应颜色失效	-	-
padding	String	padding值，格式同css	20rpx 32rpx	-
marginTop	Number	margin-top值，单位rpx	0	-
marginBottom	Number	margin-bottom值，单位rpx	0	-
radius	String	圆角值	16rpx	-
closable	Boolean	是否显示关闭按钮	false	-
closeColor	String	关闭按钮颜色	#fff	-
closeSize	Number	关闭按钮icon字体大小，单位px	22	-
spacing	Boolean	内容是否与图标之间有间隔	false	-
title	String	标题内容	-	-
color	String	标题字体颜色	#fff	-
size	String	标题字体大小	14px	-
desc	String	描述内容	-	-
descColor	String	描述内容的字体颜色	#fff	-
descSize	String	描述内容字体大小	12px	-
single	Boolean	描述内容是否单行展示，超出隐藏	false	-

# Events

事件名	类型	说明	回调参数
@leftClick	() => void	点击左侧自定义内容区域时触发	-
@onclick	() => void	点击内容区域时触发	-
@close	() => void	点击关闭按钮时触发	-

示例预览

# 示例代码地址

Alert 警告框

← Badge 徽章 Avatar 头像 →