Alert 提示
用于页面中展示重要的提示信息。
注:此接口未使用帆软官方接口,所以支持FineReport目前所有版本的工程项目。
基础用法
Alert 元素不会自动消失或关闭。且其位置默认在页面中间顶部位置。 在JS事件中写入如下代码即可使用:
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
});
2
3
4
其显示效果如下:
标题
Alert 组件的标题由title
参数控制,如果不填写title参数会出现默认文本默认title,如果看到此文本表示你的title未定义
。
自定义title
WEIBW.Feedback.alert({
title: "Alert提示标题",
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
});
2
3
不填写title
WEIBW.Feedback.alert({
});
WEIBW.Feedback.alert({
});
2
3
内容描述
Alert 组件的内容描述受description
参数控制。 注意:当description
参数有值时,组件标题内的文字会自动加粗。
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
});
2
3
4
基本类型
Alert 组件提供四种基本类型,由type
参数控件,默认值为'info'
,可选值有:'success'
、'warning'
、'info'
、'error'
。
success
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success"
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success"
});
2
3
4
5
warning
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"warning"
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"warning"
});
2
3
4
5
info
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"info"
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"info"
});
2
3
4
5
error
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"error"
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"error"
});
2
3
4
5
主题
Alert 组件主题通过effect
参数进行控制,默认值为'light'
,可选值为'light'
、'dark'
。
light
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"error",
effect:"light"
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"error",
effect:"light"
});
2
3
4
5
6
dark
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"error",
effect:"dark"
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"error",
effect:"dark"
});
2
3
4
5
6
自定义关闭按钮
Alert 组件提供了自定义关闭按钮的功能,通过closeText
参数进行控制,当该属性为空时会默认显示X
关闭按钮图标。
自定义closeText
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
closeText:"关闭"
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
closeText:"关闭"
});
2
3
4
5
6
7
不填closeText
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark"
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark"
});
2
3
4
5
6
组件宽度
Alert 组件的宽度受参数width
控制,默认值为'40%'
,其值为字符串,注意填写时要加上百分号。
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
width:"20%"
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
width:"20%"
});
2
3
4
5
6
7
图标控制
Alert 组件的图标显示由参数showIcon
控制,默认值为false
,可选值为true
、false
。 图标不支持自定义,其样式会根据type
和effect
参数进行动态变化。
显示图标
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
showIcon:true
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
showIcon:true
});
2
3
4
5
6
7
内容居中
Alert 组件内的所有内容的居中由center
参数控制,默认值为false
,可选值为true
、false
。
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
showIcon:true,
center:true
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
showIcon:true,
center:true
});
2
3
4
5
6
7
8
位置偏移
Alert 组件默认在页面居中顶部显示,其居上的偏移由参数offset
控制,默认值为'10px'
,支持自定义,但是要注意带'px'
。
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
showIcon:true,
offset:"5px"
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
showIcon:true,
offset:"5px"
});
2
3
4
5
6
7
8
回调事件
Alert 组件支持关闭组件回调事件,其回调动作由参数callback
控制。其类型为function
。
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
showIcon:true,
callback:function(){
alert("关闭事件!")
}
});
WEIBW.Feedback.alert({
title: "Alert提示标题",
description:"提示具体描述文本",
type:"success",
effect:"dark",
showIcon:true,
callback:function(){
alert("关闭事件!")
}
});
2
3
4
5
6
7
8
9
10
参数解释
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
title | 标题 | string | 无 | 是 |
description | 内容描述 | string | 无 | 否 |
type | 基本类型 | enum ,可选项'success' 、'warning' 、'info' 、'error' | 'info' | 否 |
effect | 主题 | enum ,可选项'light' 、'dark' | 'light' | 否 |
width | 宽度 | string | '40%' | 否 |
center | 是否居中 | enum ,可选项true 、false | false | 否 |
closeText | 关闭按钮文字 | string | 无 | 否 |
showIcon | 是否显示图标 | enum ,可选项true 、false | false | 否 |
offset | 偏移距离 | string | '0px' | 否 |
callback | 关闭按钮回调事件 | function | 无 | 否 |