Weibw's FR

Appearance

精品课程 🔗

simpleprosimplepro

Alert 提示 ​

用于页面中展示重要的提示信息。

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

基础用法 ​

Alert 元素不会自动消失或关闭。且其位置默认在页面中间顶部位置。 在JS事件中写入如下代码即可使用：

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
});

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

标题 ​

Alert 组件的标题由title参数控制，如果不填写title参数会出现默认文本默认title，如果看到此文本表示你的title未定义。

自定义title ​

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
});

输入图片说明

不填写title ​

javascript
WEIBW.Feedback.alert({
  
});
WEIBW.Feedback.alert({
  
});

输入图片说明

内容描述 ​

Alert 组件的内容描述受description参数控制。 注意：当description参数有值时，组件标题内的文字会自动加粗。

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
});

输入图片说明

基本类型 ​

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

success ​

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"success"
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"success"
});

输入图片说明

warning ​

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"warning"
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"warning"
});

输入图片说明

info ​

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"info"
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"info"
});

输入图片说明

error ​

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"error"
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"error"
});

输入图片说明

主题 ​

Alert 组件主题通过effect参数进行控制，默认值为'light'，可选值为'light'、'dark'。

light ​

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"error",
  effect:"light"
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"error",
  effect:"light"
});

输入图片说明

dark ​

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"error",
  effect:"dark"
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"error",
  effect:"dark"
});

输入图片说明

自定义关闭按钮 ​

Alert 组件提供了自定义关闭按钮的功能，通过closeText参数进行控制，当该属性为空时会默认显示X关闭按钮图标。

自定义closeText ​

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"success",
  effect:"dark",
  closeText:"关闭"
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"success",
  effect:"dark",
  closeText:"关闭"
});

输入图片说明

不填closeText ​

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"success",
  effect:"dark"
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"success",
  effect:"dark"
});

输入图片说明

组件宽度 ​

Alert 组件的宽度受参数width控制，默认值为'40%'，其值为字符串，注意填写时要加上百分号。

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"success",
  effect:"dark",
  width:"20%"
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"success",
  effect:"dark",
  width:"20%"
});

输入图片说明

图标控制 ​

Alert 组件的图标显示由参数showIcon控制，默认值为false，可选值为true、false。 图标不支持自定义，其样式会根据type和effect参数进行动态变化。

显示图标 ​

javascript
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"success",
  effect:"dark",
  showIcon:true
});
WEIBW.Feedback.alert({
  title: "Alert提示标题",
  description:"提示具体描述文本",
  type:"success",
  effect:"dark",
  showIcon:true
});

输入图片说明

内容居中 ​

Alert 组件内的所有内容的居中由center参数控制，默认值为false，可选值为true、false。

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

输入图片说明

位置偏移 ​

Alert 组件默认在页面居中顶部显示，其居上的偏移由参数offset控制，默认值为'10px'，支持自定义，但是要注意带'px'。

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

输入图片说明

回调事件 ​

Alert 组件支持关闭组件回调事件，其回调动作由参数callback控制。其类型为function。

javascript
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("关闭事件！")
  }
});

输入图片说明

参数解释 ​

参数说明类型默认值是否必填
title标题string无是
description内容描述string无否
type基本类型enum，可选项'success'、'warning'、'info'、'error''info'否
effect主题enum，可选项'light'、'dark''light'否
width宽度string'40%'否
center是否居中enum，可选项true、falsefalse否
closeText关闭按钮文字string无否
showIcon是否显示图标enum，可选项true、falsefalse否
offset偏移距离string'0px'否
callback关闭按钮回调事件function无否

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

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

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