以主流浏览器为主，兼容IE8.
npm i @goldnet/componentimport { ReviewProcess, a } from '@goldnet/component';
//vue2，mounted中查找节点，添加。_props为组件的属性，具体看下方
mounted（）{
const div = document.getElementById('customDiv');
if (div) {
a(ReviewProcess(_props), div);
}
}
//vue3, onMounted回调中查找节点，添加。
onMounted(() => {
// 如上
})- 在加载之前需要有
core-js或es5-shim的polyfill，否则会报错。 - npm获取引入的js, 如
dist/index.iife.js或https://unpkg.com/@goldnet/component@0.0.1/dist/index.iife.js
如果项目中没有用过
core-js或es5-shim可从这里下载：https://unpkg.com/@goldnet/component@0.0.1/libs/minified.min.js
<script src="https://unpkg.com/@goldnet/component@0.0.1/dist/index.iife.js"></script>
<script>
const ele = document.getElementById('content');
goldnet.h(goldnet.ReviewProcess(_props), ele) ;// _props 见下方说明
</script>【必选】要展示的数据
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
*/自定义状态文字和颜色 对映source的status字段
/*
color
[可选] 状态颜色，支持：success、processing、error、default、自定义颜色值
label:
[可选] 审核状态,
*/
var statusConfig = {
"1": {
color: "processing",
label: "提交申请",
}
}<!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: "#ff00ff",
label: "审批拒绝",
}
}
// 属性定义
var _props = { source: source, statusConfig: statusConfig, style: { textAlign: 'left' } };
</script>
<!-- 引入兼容库-->
<script src="https://unpkg.com/@goldnet/component@0.0.1/libs/minified.min.js"></script>
<script src="https://unpkg.com/@goldnet/component@0.0.1/dist/index.iife.js"></script>
<script>
goldnet.h(goldnet.ReviewProcess(_props), document.getElementById('content'))
</script>
</body>
</html>