Prompt 提交内容
当需要用户输入内容时,可以使用 Prompt 类型的消息框。
注:此接口未使用帆软官方接口,所以支持FineReport目前所有版本的工程项目。
基础用法
WEIBW.Feedback.prompt({
title: "prompt",
label: "请正确填写信息!"
});
WEIBW.Feedback.prompt({
title: "prompt",
label: "请正确填写信息!"
});
2
3
4
标题
Prompt 组件的标题由title
参数控制,如果不填写title参数会出现默认文本默认title
。
自定义title
WEIBW.Feedback.prompt({
title: "自定义标题",
label: "请正确填写信息!"
});
WEIBW.Feedback.prompt({
title: "自定义标题",
label: "请正确填写信息!"
});
2
3
4
描述
Prompt 组件的内容描述受label
参数控制。
WEIBW.Feedback.prompt({
title: "自定义描述",
label: "自定义填报的描述!"
});
WEIBW.Feedback.prompt({
title: "自定义描述",
label: "自定义填报的描述!"
});
2
3
4
基本类型
Prompt 组件提供四种基本类型,由type
参数控件,默认值为false
,可选值有:'success'
、'warning'
、'info'
、'error'
。
无类型
当type
参数不设定值或者值为false
时,为无类型。
WEIBW.Feedback.prompt({
title: "无类型",
label: "自定义填报的描述!"
});
WEIBW.Feedback.prompt({
title: "无类型",
label: "自定义填报的描述!"
});
2
3
4
success
WEIBW.Feedback.prompt({
title: "success",
label: "自定义填报的描述!",
type: "success"
});
WEIBW.Feedback.prompt({
title: "success",
label: "自定义填报的描述!",
type: "success"
});
2
3
4
5
warning
WEIBW.Feedback.prompt({
title: "warning",
label: "自定义填报的描述!",
type: "warning"
});
WEIBW.Feedback.prompt({
title: "warning",
label: "自定义填报的描述!",
type: "warning"
});
2
3
4
5
info
WEIBW.Feedback.prompt({
title: "info",
label: "自定义填报的描述!",
type: "info"
});
WEIBW.Feedback.prompt({
title: "info",
label: "自定义填报的描述!",
type: "info"
});
2
3
4
5
error
WEIBW.Feedback.prompt({
title: "error",
label: "自定义填报的描述!",
type: "error"
});
WEIBW.Feedback.prompt({
title: "error",
label: "自定义填报的描述!",
type: "error"
});
2
3
4
5
校验规则
Prompt 组件支持自定义输入框内填写内容的校验规则,其由rule
参数控制,类型为正则表达式字符串。
WEIBW.Feedback.prompt({
title: "自定义校验规则",
label: "自定义填报的描述!",
rule:".*"
});
WEIBW.Feedback.prompt({
title: "自定义校验规则",
label: "自定义填报的描述!",
rule:".*"
});
2
3
4
5
错误提示
Prompt 组件支持自定义错误提示,其由errormsg
参数控制。
WEIBW.Feedback.prompt({
title: "自定义错误提示",
label: "自定义填报的描述!",
errormsg:"自定义错误文字描述"
});
WEIBW.Feedback.prompt({
title: "自定义错误提示",
label: "自定义填报的描述!",
errormsg:"自定义错误文字描述"
});
2
3
4
5
提交按钮
Prompt 组件的提交按钮支持自定义,其由参数submit
控制。该参数为wei-btn
对象。有关wei-btn
对象的使用在文档末尾。
WEIBW.Feedback.prompt({
title: "自定义提交按钮",
label: "自定义填报的描述!",
submit: {
show: true,
text: "自定义确认按钮",
type: "danger",
clickfunc: function() {
alert(123);
WEIBW.Feedback.closePrompt();
}
}
});
WEIBW.Feedback.prompt({
title: "自定义提交按钮",
label: "自定义填报的描述!",
submit: {
show: true,
text: "自定义确认按钮",
type: "danger",
clickfunc: function() {
alert(123);
WEIBW.Feedback.closePrompt();
}
}
});
2
3
4
5
6
7
8
9
10
11
12
13
取消按钮
Prompt 组件的取消按钮支持自定义,其由参数cancel
控制。该参数为wei-btn
对象。有关wei-btn
对象的使用在文档末尾。
WEIBW.Feedback.prompt({
title: "自定义取消按钮",
label: "自定义填报的描述!",
cancel: {
show: true,
text: "自定义取消按钮",
type: "warning",
clickfunc: function() {
alert(123);
WEIBW.Feedback.closeConfirm();
}
}
});
WEIBW.Feedback.prompt({
title: "自定义取消按钮",
label: "自定义填报的描述!",
cancel: {
show: true,
text: "自定义取消按钮",
type: "warning",
clickfunc: function() {
alert(123);
WEIBW.Feedback.closeConfirm();
}
}
});
2
3
4
5
6
7
8
9
10
11
12
13
自定义按钮
Prompt 组件同时支持用户自定义多个按钮,自定义按钮同样为wei-btn
对象组成的数组,其由参数custombtns
控制。有关wei-btn
对象的使用在文档末尾。
WEIBW.Feedback.prompt({
title: "自定义按钮",
label: "自定义填报的描述!",
custombtns: [{
text: "自定义按钮1",
type: "warning",
},
{
text: "自定义按钮2",
type: "danger",
}
]
});
WEIBW.Feedback.prompt({
title: "自定义按钮",
label: "自定义填报的描述!",
custombtns: [{
text: "自定义按钮1",
type: "warning",
},
{
text: "自定义按钮2",
type: "danger",
}
]
});
2
3
4
5
6
7
8
9
10
11
12
13
14
promptValue
在我们定义的按钮的点击事件中,如果你需要调用输入框中输入的值,你可以直接使用promptValue
变量。
WEIBW.Feedback.prompt({
title: "打印输入值",
label: "请输入需要打印的值!",
submit: {
show: true,
text: "打印",
clickfunc: function(promptValue) {
alert(promptValue);
WEIBW.Feedback.closePrompt();
}
}
});
WEIBW.Feedback.prompt({
title: "打印输入值",
label: "请输入需要打印的值!",
submit: {
show: true,
text: "打印",
clickfunc: function(promptValue) {
alert(promptValue);
WEIBW.Feedback.closePrompt();
}
}
});
2
3
4
5
6
7
8
9
10
11
12
关闭弹窗
我们在 Prompt 组件的默认点击事件中已添加了一个方法WEIBW.Feedback.closePrompt();
。这个方法可以关闭当前的prompt窗口。如果您在使用过程中涉及到了自定义按钮,那么您务必在您的clickfunc
中处理完业务后执行一下该方法,否则您的窗口将无法正常关闭。
WEIBW.Feedback.closePrompt();
WEIBW.Feedback.closePrompt();
参数解释
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
title | 标题 | string | 无 | 是 |
label | 输入框标签描述 | string | 无 | 是 |
type | 基本类型 | enum ,可选项'success' 、'warning' 、'info' 、'error' 或者false | false | 否 |
rule | 输入内容验证规则 | string ,正则表达式字符串 | 无 | 否 |
errormsg | 错误提示信息 | string | 无 | 是 |
submit | 确认按钮 | wei-btn ,参考 wei-btn 对象使用说明 | 无 | 否 |
cancel | 取消按钮 | wei-btn ,参考 wei-btn 对象使用说明 | 无 | 否 |
custombtns | 自定义按钮组 | wei-btn 组成的数组,参考 wei-btn 对象使用说明 | 无 | 否 |
wei-btn
对象
wei-btn
是我们为了方便用户针对按钮进行个性化配置而创造出的一个按钮对象。
{
show: true,
type: "danger",
text: "自定义取消按钮",
clickfunc: function() {
alert("取消按钮");
WEIBW.Feedback.closeConfirm();
}
}
{
show: true,
type: "danger",
text: "自定义取消按钮",
clickfunc: function() {
alert("取消按钮");
WEIBW.Feedback.closeConfirm();
}
}
2
3
4
5
6
7
8
9
其各项参数解释如下:
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
show | 是否显示 | bool ,可选项true 、false | true | 否 |
type | 按钮类型 | enum ,可选项'primary' 、'success' 、'warning' 、'danger' 、 'info' 或者'text' | 无 | 否 |
text | 按钮文字 | string | 根据具体场景有对应的默认值 | 否 |
clickfunc | 点击事件 | function ,如果您使用了该属性,请务必在业务处理末端调用方法WEIBW.Feedback.closePrompt(); | 无 | 否 |