Notification 通知
悬浮出现在页面角落,显示全局的通知提醒消息。
注:此接口未使用帆软官方接口,所以支持FineReport目前所有版本的工程项目。
基础用法
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
});
2
3
4
显示效果如下:
标题
Notification 组件的标题由title
参数控制,如果不填写,则会显示默认值默认title
。
自定义title
WEIBW.Feedback.notification({
title: "自定义title",
});
WEIBW.Feedback.notification({
title: "自定义title",
});
2
3
不填写title
WEIBW.Feedback.notification({
});
WEIBW.Feedback.notification({
});
2
3
消息内容
Notification 组件的消息内容由message
参数控制。
WEIBW.Feedback.notification({
title: "自定义title",
message:"自定义message"
});
WEIBW.Feedback.notification({
title: "自定义title",
message:"自定义message"
});
2
3
4
基本类型
Notification 组件提供四种基本类型,由type
参数控件,默认值为'info'
,可选值有:'success'
、'warning'
、'info'
、'error'
。
Notification的类型其实就是图表的样式,图标不支持自定义,会根据type参数值的变化进行动态变化。 当type参数未定义,或其值为空字符串时,图标将会隐藏。
type为空字符串
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:""
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:""
});
2
3
4
5
success
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success"
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success"
});
2
3
4
5
warning
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"warning"
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"warning"
});
2
3
4
5
info
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"info"
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"info"
});
2
3
4
5
error
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"error"
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"error"
});
2
3
4
5
显示位置
Notification 组件的显示位置由参数position
控制,其默认值为'right-top'
,可选值:'right-top'
,'right-bottom'
,'left-top'
,'left-bottom'
。
注意,该参数类型为字符串,目前未做强制校验,所以如果所填值不在可选值范围中,则会导致显示错乱等问题。
right-top
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"right-top"
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"right-top"
});
2
3
4
5
6
right-bottom
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"right-bottom"
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"right-bottom"
});
2
3
4
5
6
left-top
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"left-top"
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"left-top"
});
2
3
4
5
6
left-bottom
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"left-bottom"
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"left-bottom"
});
2
3
4
5
6
主动关闭按钮
Notification 组件的支持主动关闭,其由参数showClose
参数控制,默认值为false
,如果需要显示关闭按钮,则需要设置该参数值为true
。
显示主动关闭按钮
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"right-top",
showClose:true
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"right-top",
showClose:true
});
2
3
4
5
6
7
显示时长
Notification 组件的显示时长由duration
参数控制,其默认值为4500
,单位为毫秒。
自定义显示时长
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"right-top",
showClose:true,
duration:2000
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"right-top",
showClose:true,
duration:2000
});
2
3
4
5
6
7
8
自定义HTML内容
Notification 组件的消息内容默认是已文本形式展示。但是其也支持使用HTML渲染,此项配置由参数useHTML
控制,默认值为false
,当其值为true
时系统会将message
中的内容以HTML元素的形式进行渲染。
自定义HTML
WEIBW.Feedback.notification({
title: "自定义HTML",
message: "<div>测试自定义HTML</div><div><img src='https://www.w3school.com.cn/i/eg_tulip.jpg' style='width:100%'/></div> ",
type: "success",
showClose: true,
position:"right-top",
useHTML:true
})
WEIBW.Feedback.notification({
title: "自定义HTML",
message: "<div>测试自定义HTML</div><div><img src='https://www.w3school.com.cn/i/eg_tulip.jpg' style='width:100%'/></div> ",
type: "success",
showClose: true,
position:"right-top",
useHTML:true
})
2
3
4
5
6
7
8
回调事件
Notification 组件支持关闭组件回调事件,其回调动作由参数callback
控制。其类型为function
。
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"right-top",
showClose:true,
duration:6000,
callback:function(){
WEIBW.Feedback.alert({title:"测试回调结果",type:"error",showIcon:true});
}
});
WEIBW.Feedback.notification({
title: "Notification提示标题",
message:"提示具体信息文本",
type:"success",
position:"right-top",
showClose:true,
duration:6000,
callback:function(){
WEIBW.Feedback.alert({title:"测试回调结果",type:"error",showIcon:true});
}
});
2
3
4
5
6
7
8
9
10
11
参数解释
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
title | 标题 | string | 无 | 是 |
message | 消息主要文本内容,支持HTML(需配合useHTML参数使用) | string | 无 | 是 |
type | 基本类型 | enum ,可选项'success' 、'warning' 、'info' 、'error' ,除此之外,也可以选择填空字符串,就会隐藏图标 | "" | 否 |
position | 显示位置 | enum ,可选项'right-top' ,'right-bottom' ,'left-top' ,'left-bottom' | 'right-top' | 否 |
showClose | 显示关闭按钮 | bool | false | 否 |
useHTML | 是否使用HTML进行渲染显示 | bool ,可选项true 、false | false | 否 |
duration | 元素显示时间 | number ,单位毫秒 | 4500 | 否 |
callback | 关闭按钮回调事件 | function | 无 | 否 |