@goldnet/component

v0.0.4

Published

3 months ago

以主流浏览器为主，兼容IE8.

Downloads

0High
0Medium
0Low

ifyx

兼容UI组件库 react vue ie

审核组件

以主流浏览器为主，兼容IE8.

VUE2、VUE3 使用

安装

npm i @goldnet/component

使用

import { ReviewProcess, a } from '@goldnet/component';

//vue2，mounted中查找节点，添加。_props为组件的属性，具体看下方
mounted（）{
	const div = document.getElementById('customDiv');
	if (div) {
		a(ReviewProcess(_props), div);
	}
}
//vue3, onMounted回调中查找节点，添加。
onMounted(() => {
	// 如上
})

Layui & Script 标签使用

安装

npm获取引入的js, 如dist/index.iife.js 或 https://unpkg.com/@goldnet/component/dist/index.iife.js

使用

<script src="https://unpkg.com/@goldnet/component/dist/index.iife.js"></script>
<script>
	const ele = document.getElementById('content');
	goldnet.h(goldnet.ReviewProcess(_props), ele) ;// _props 见下方说明
</script>

Props属性

source

【必选】要展示的数据

var source = [
	{
		status: "1",
		desc: "审核中1",
		label: "企业经办人 张三1",
		datetime: "2021-10-10 10:10:10"
	}
];
/*
status
  [必选]审核状态码,  预设的值(1:提交申请 2:审批同意 3:审批驳回 4:审批拒绝)
desc:
  [可选]审核建议描述,
label:
  [可选]审核人标签, 如："企业经办人 张三1",
datetime:
  [可选] 日期，支持三种形式，如：
  时间日期字符串 ： "2021-10-10 10:10:10",
  时间戳(毫秒)： 1710316054000,
  时间戳(秒)：1710316054
*/

statusConfig

自定义状态文字和颜色对映source的status字段

/*
color
  [可选] 状态颜色，支持：success、processing、error、default、自定义颜色对象{color: string;borderColor?: string;background?: string;}
label:
  [可选] 审核状态,
*/
var statusConfig = {
	"1": {
		color: "processing",
		label: "提交申请",
	}
}

hideTag

是否隐藏标签默认false

{ source: source, statusConfig: statusConfig,hideTag:true };

完整的案例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>review-process</title>
</head>

<body>
	<div id="content">

	</div>
	<script>
		var source = [
			{
				status: "1",
				desc: "审核中1",
				label: "企业经办人 张三1",
				datetime: "2021-10-10 10:10:10", // 时间日期字符串
			},
			{
				status: "2",
				desc: "审核中2",
				label: "企业经办人 张三2",
				datetime: 1710316054000, // 时间戳(秒)
			},
			{
				status: "3",
				desc: "审核中3",
				label: "企业经办人 张三3",
				datetime: 1710316054, // 时间戳(秒)
			},
			{
				status: "4",
				desc: "审核中4",
				label: "企业经办人 张三4",
				datetime: "2024-10-10 10:10:10"
			},
			{
				status: "5",
				desc: "审核中5",
				label: "企业经办人 张三5",
				datetime: "2025-10-10 10:10:10"
			},
		];

		var statusConfig = {
			"1": {
				color: "processing",
				label: "提交申请",
			},
			"2": {
				color: "success",
				label: "审批同意",
			},
			"3": {
				color: "error",
				label: "审批驳回",
			},
			"4": {
				color: "default",
				label: "审批拒绝",
			},
			"5": {
				color: { color: "#ff00ff", background: "#000000", borderColor: 'red' },
				label: "审批拒绝",
			}
		}
		// 属性定义
		var _props = { source: source, statusConfig: statusConfig, style: { textAlign: 'left' } };

	</script>

	<!-- 引入兼容库-->
	<script src="https://unpkg.com/@goldnet/component/dist/libs/minified.min.js"></script>
	<script src="https://unpkg.com/@goldnet/component/dist/index.iife.js"></script>
	<script>
		goldnet.h(goldnet.ReviewProcess(_props), document.getElementById('content'))
	</script>
</body>

</html>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

审核组件

VUE2、VUE3 使用

安装

使用

Layui & Script 标签使用

安装

使用

Props属性

source

statusConfig

hideTag

完整的案例