Weibw's FR

Appearance

精品课程 🔗

simpleprosimplepro

Notification 通知 ​

悬浮出现在页面角落，显示全局的通知提醒消息。

注：此接口未使用帆软官方接口，所以支持FineReport目前所有版本的工程项目。

基础用法 ​

javascript
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
});
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
});

显示效果如下： 输入图片说明

标题 ​

Notification 组件的标题由title参数控制，如果不填写，则会显示默认值默认title。

自定义title ​

javascript
WEIBW.Feedback.notification({
  title: "自定义title",
});
WEIBW.Feedback.notification({
  title: "自定义title",
});

输入图片说明

不填写title ​

javascript
WEIBW.Feedback.notification({

});
WEIBW.Feedback.notification({

});

输入图片说明

消息内容 ​

Notification 组件的消息内容由message参数控制。

javascript
WEIBW.Feedback.notification({
  title: "自定义title",
  message:"自定义message"
});
WEIBW.Feedback.notification({
  title: "自定义title",
  message:"自定义message"
});

输入图片说明

基本类型 ​

Notification 组件提供四种基本类型，由type参数控件，默认值为'info'，可选值有：'success'、'warning'、'info'、'error'。

Notification的类型其实就是图表的样式，图标不支持自定义，会根据type参数值的变化进行动态变化。 当type参数未定义，或其值为空字符串时，图标将会隐藏。

type为空字符串 ​

javascript
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:""
});
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:""
});

输入图片说明

success ​

javascript
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"success"
});
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"success"
});

输入图片说明

warning ​

javascript
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"warning"
});
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"warning"
});

输入图片说明

info ​

javascript
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"info"
});
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"info"
});

输入图片说明

error ​

javascript
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"error"
});
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"error"
});

输入图片说明

显示位置 ​

Notification 组件的显示位置由参数position控制，其默认值为'right-top'，可选值：'right-top'，'right-bottom'，'left-top'，'left-bottom'。

注意，该参数类型为字符串，目前未做强制校验，所以如果所填值不在可选值范围中，则会导致显示错乱等问题。

right-top ​

javascript
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"success",
  position:"right-top"
});
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"success",
  position:"right-top"
});

输入图片说明

right-bottom ​

javascript
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"success",
  position:"right-bottom"
});
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"success",
  position:"right-bottom"
});

输入图片说明

left-top ​

javascript
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"success",
  position:"left-top"
});
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"success",
  position:"left-top"
});

输入图片说明

left-bottom ​

javascript
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"success",
  position:"left-bottom"
});
WEIBW.Feedback.notification({
  title: "Notification提示标题",
  message:"提示具体信息文本",
  type:"success",
  position:"left-bottom"
});

输入图片说明

主动关闭按钮 ​

Notification 组件的支持主动关闭，其由参数showClose参数控制，默认值为false，如果需要显示关闭按钮，则需要设置该参数值为true。

显示主动关闭按钮 ​

javascript
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
});

输入图片说明

显示时长 ​

Notification 组件的显示时长由duration参数控制，其默认值为4500，单位为毫秒。

自定义显示时长 ​

javascript
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
});

输入图片说明

自定义HTML内容 ​

Notification 组件的消息内容默认是已文本形式展示。但是其也支持使用HTML渲染，此项配置由参数useHTML控制，默认值为false，当其值为true时系统会将message中的内容以HTML元素的形式进行渲染。

自定义HTML ​

javascript
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
})

输入图片说明

回调事件 ​

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});
  }
});

输入图片说明

参数解释 ​

参数说明类型默认值是否必填
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显示关闭按钮boolfalse否
useHTML是否使用HTML进行渲染显示bool，可选项true、falsefalse否
duration元素显示时间number，单位毫秒4500否
callback关闭按钮回调事件function无否

如果您觉得内容还不错，可以点击打赏按钮支持我

如果您在阅读及使用过程中发现问题，或如果您有不理解的地方，都可以点击下方按钮与我沟通交流

首页 精品课程 帆软社区 我的小伙伴们
Copyright © 2019-present weibw 豫ICP备2023024804号