Weibw's FR

Appearance

精品课程 🔗

simpleprosimplepro

Prompt 提交内容 ​

当需要用户输入内容时，可以使用 Prompt 类型的消息框。

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

基础用法 ​

javascript
WEIBW.Feedback.prompt({
	title: "prompt",
	label: "请正确填写信息！"
});
WEIBW.Feedback.prompt({
	title: "prompt",
	label: "请正确填写信息！"
});

标题 ​

Prompt 组件的标题由title参数控制，如果不填写title参数会出现默认文本默认title。

自定义title ​

javascript
WEIBW.Feedback.prompt({
	title: "自定义标题",
	label: "请正确填写信息！"
});
WEIBW.Feedback.prompt({
	title: "自定义标题",
	label: "请正确填写信息！"
});

描述 ​

Prompt 组件的内容描述受label参数控制。

javascript
WEIBW.Feedback.prompt({
	title: "自定义描述",
	label: "自定义填报的描述！"
});
WEIBW.Feedback.prompt({
	title: "自定义描述",
	label: "自定义填报的描述！"
});

基本类型 ​

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

无类型 ​

当type参数不设定值或者值为false时，为无类型。

javascript
WEIBW.Feedback.prompt({
	title: "无类型",
	label: "自定义填报的描述！"
});
WEIBW.Feedback.prompt({
	title: "无类型",
	label: "自定义填报的描述！"
});

success ​

javascript
WEIBW.Feedback.prompt({
	title: "success",
	label: "自定义填报的描述！",
	type: "success"
});
WEIBW.Feedback.prompt({
	title: "success",
	label: "自定义填报的描述！",
	type: "success"
});

warning ​

javascript
WEIBW.Feedback.prompt({
	title: "warning",
	label: "自定义填报的描述！",
	type: "warning"
});
WEIBW.Feedback.prompt({
	title: "warning",
	label: "自定义填报的描述！",
	type: "warning"
});

info ​

javascript
WEIBW.Feedback.prompt({
	title: "info",
	label: "自定义填报的描述！",
	type: "info"
});
WEIBW.Feedback.prompt({
	title: "info",
	label: "自定义填报的描述！",
	type: "info"
});

error ​

javascript
WEIBW.Feedback.prompt({
	title: "error",
	label: "自定义填报的描述！",
	type: "error"
});
WEIBW.Feedback.prompt({
	title: "error",
	label: "自定义填报的描述！",
	type: "error"
});

校验规则 ​

Prompt 组件支持自定义输入框内填写内容的校验规则，其由rule参数控制，类型为正则表达式字符串。

javascript
WEIBW.Feedback.prompt({
	title: "自定义校验规则",
	label: "自定义填报的描述！",
	rule:".*"
});
WEIBW.Feedback.prompt({
	title: "自定义校验规则",
	label: "自定义填报的描述！",
	rule:".*"
});

错误提示 ​

Prompt 组件支持自定义错误提示，其由errormsg参数控制。

javascript
WEIBW.Feedback.prompt({
	title: "自定义错误提示",
	label: "自定义填报的描述！",
	errormsg:"自定义错误文字描述"
});
WEIBW.Feedback.prompt({
	title: "自定义错误提示",
	label: "自定义填报的描述！",
	errormsg:"自定义错误文字描述"
});

提交按钮 ​

Prompt 组件的提交按钮支持自定义，其由参数submit控制。该参数为wei-btn对象。有关wei-btn对象的使用在文档末尾。

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

取消按钮 ​

Prompt 组件的取消按钮支持自定义，其由参数cancel控制。该参数为wei-btn对象。有关wei-btn对象的使用在文档末尾。

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

自定义按钮 ​

Prompt 组件同时支持用户自定义多个按钮，自定义按钮同样为wei-btn对象组成的数组，其由参数custombtns控制。有关wei-btn对象的使用在文档末尾。

javascript
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",
		}

	]
});

promptValue ​

在我们定义的按钮的点击事件中，如果你需要调用输入框中输入的值，你可以直接使用promptValue变量。

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

关闭弹窗 ​

我们在 Prompt 组件的默认点击事件中已添加了一个方法WEIBW.Feedback.closePrompt();。这个方法可以关闭当前的prompt窗口。如果您在使用过程中涉及到了自定义按钮，那么您务必在您的clickfunc中处理完业务后执行一下该方法，否则您的窗口将无法正常关闭。

Javascript
WEIBW.Feedback.closePrompt();
WEIBW.Feedback.closePrompt();

参数解释 ​

参数说明类型默认值是否必填
title标题string无是
label输入框标签描述string无是
type基本类型enum，可选项'success'、'warning'、'info'、'error' 或者falsefalse否
rule输入内容验证规则string，正则表达式字符串无否
errormsg错误提示信息string无是
submit确认按钮wei-btn，参考 wei-btn对象使用说明无否
cancel取消按钮wei-btn，参考 wei-btn对象使用说明无否
custombtns自定义按钮组wei-btn组成的数组，参考 wei-btn对象使用说明无否

wei-btn对象 ​

wei-btn是我们为了方便用户针对按钮进行个性化配置而创造出的一个按钮对象。

Javascript
{
		show: true,
		type: "danger",
		text: "自定义取消按钮",
		clickfunc: function() {
			alert("取消按钮");
			WEIBW.Feedback.closeConfirm();
		}
}
{
		show: true,
		type: "danger",
		text: "自定义取消按钮",
		clickfunc: function() {
			alert("取消按钮");
			WEIBW.Feedback.closeConfirm();
		}
}

其各项参数解释如下：

参数说明类型默认值是否必填
show是否显示bool，可选项true、falsetrue否
type按钮类型enum，可选项'primary'、'success'、'warning'、'danger'、 'info'或者'text'无否
text按钮文字string根据具体场景有对应的默认值否
clickfunc点击事件function，如果您使用了该属性，请务必在业务处理末端调用方法WEIBW.Feedback.closePrompt();无否

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

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

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