Gojs在Vue中绘制树形图、拓扑图，可收缩，动态连线效果代码
代码语言：html
所属分类：图表
代码描述：Gojs在Vue中绘制树形图、拓扑图，可收缩，动态连线效果代码
代码标签： gojs vue 绘制 树形图 拓扑图 可收缩 动态 连线
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>treeChart,topologyChart,flexible,dynamicConnection 树形图、拓扑图，可收缩，动态连线，Gojs 在 Vue 中使用</title>
<style>
/* #myDiagramDiv {
background-color: #F8F8F8;
border: 1px solid #aaa;
}
*/
.topo-chart {
position: relative;
height: 808px;
width: 100%;
background: #050f26;
}
.chart {
height: 100%;
width: 100%;
z-index: 0;
}
.topo-operate {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 120px;
height: 60px;
width: 100%;
z-index: 1;
background: #050f26;
}
.operate-item {
margin-left: 30px;
}
.operate-item span {
display: inline-block;
color: #0f98b4;
font-size: 16px;
cursor: pointer;
}
.operate-item .collapse-icon {
margin-left: 5px;
width: 10px;
height: 10px;
background-size: 20px 10px;
}
.operate-item .expand-icon {
margin-left: 5px;
width: 10px;
height: 10px;
background-size: 20px 10px;
}
.operate-item .zoom-icon {
margin-left: 5px;
width: 11px;
height: 10px;
background-size: 22px 10px;
}
.operate-item .full-screen {
width: 12px;
height: 12px;
background-size: 24px 12px;
}
.operate-item .full-screen-open {
}
.operate-item .full-screen-close {
}
.operate-item:hover span {
color: #23daff;
}
.operate-item:hover .collapse-icon,
.operate-item:hover .expand-icon,
.operate-item:hover .zoom-icon,
.operate-item:hover .full-screen {
background-position-x: 100%;
}
.topo-scale {
position: absolute;
bottom: 20px;
right: 20px;
color: #8e8e8e;
font-size: 16px;
}
</style>
</head>
<body>
<div id="sample" style="height: 100%; width: 100%;">
<diagram :topology-data='diagramData'></diagram>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/go.js"></script>
<script>
var topoChartData = {
nodeDataArray: [
{
key: "root",
group: "",
category: "root",
root: {
name: "根节点" },
isGroup: false },
{
key: "1,1",
group: "",
category: "layerTwoNodeInfo",
layerTwoNodeInfo: {
name: "默认组织/默认组织",
count: 5,
category: "orgnizInfo",
parentId: 1,
parentName: "默认组织",
childId: 1,
childName: "默认组织" },
isGroup: false },
{
key: "DevNull,DevNull",
group: "",
category: "layerTwoNodeInfo",
layerTwoNodeInfo: {
name: "未配置" },
isGroup: false },
{
key: "5454efcd-14bb-4425-900c-de24767daf23",
group: "",
category: "layerThreeNodeInfo",
layerThreeNodeInfo: {
devUuid: "5454efcd-14bb-4425-900c-de24767daf23",
devName: "1.20",
devStatus: 1 },
isGroup: false },
{
key: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
group: "",
category: "layerThreeNodeInfo",
layerThreeNodeInfo: {
devUuid: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
devName: "1.74",
devStatus: 1 },
isGroup: false },
{
key: "386108c1-c180-437b-9512-701bf829b620",
group: "",
category: "layerThreeNodeInfo",
layerThreeNodeInfo: {
devUuid: "386108c1-c180-437b-9512-701bf829b620",
devName: "1.57-",
devStatus: 1 },
isGroup: false },
{
key: "e32b804b-71e2-45aa-b65f-f46f5853d3f5",
group: "",
category: "layerThreeNodeInfo",
layerThreeNodeInfo: {
devUuid: "e32b804b-71e2-45aa-b65f-f46f5853d3f5",
devName: "1.221",
devStatus: 0 },
isGroup: false },
{
key: "f378fada-ec81-4b85-9fb4-8bdfc8ea43a5",
group: "",
category: "layerThreeNodeInfo",
layerThreeNodeInfo: {
devUuid: "f378fada-ec81-4b85-9fb4-8bdfc8ea43a5",
devName: "1.110",
devStatus: 0 },
isGroup: false },
{
key: "DevUuidNull",
group: "",
category: "layerThreeNodeInfo2",
layerThreeNodeInfo2: {
devName: "未配置" },
isGroup: false },
{
key: "P1",
group: "",
category: "layerFourGroupOneInfo",
layerFourGroupOneInfo: {
name: "默认组织",
parentId: 1,
parentName: "默认组织" },
isGroup: true },
{
key: "C1",
group: "P1",
category: "layerFourGroupTwoInfo",
layerFourGroupTwoInfo: {
name: "默认组织",
parentId: 1,
parentName: "默认组织",
childId: 1,
childName: "默认组织",
count: "10" },
isGroup: true },
{
key: "node78",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 78,
nodeUuid: "1b8cd73e-75c0-4940-beec-394a9f27be84",
nodeName: "test",
isProtected: 0 },
isGroup: false },
{
key: "node69",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 69,
nodeUuid: "1e757f87-eee0-44e2-8cf9-nodee47df8cf6e",
nodeName: "1.62",
nodeStatus: 3,
isProtected: 1,
nodeFlag: "386108c1-c180-437b-9512-701bf829b620,," },
isGroup: false },
{
key: "node42",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 42,
nodeUuid: "228ff1d5-cd1f-4ca6-8753-cfab97be89c5",
nodeName: "user",
isProtected: 0 },
isGroup: false },
{
key: "node63",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 63,
nodeUuid: "371444a9-f2ed-4b5b-a3ec-1354833bb91c",
nodeName: "测试2",
nodeStatus: 4,
isProtected: 1,
nodeFlag: "386108c1-c180-437b-9512-701bf829b620" },
isGroup: false },
{
key: "node77",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 77,
nodeUuid: "83a0c5a8-683c-42ed-bf32-74a766a87b39",
nodeName: "q",
nodeStatus: 2,
isProtected: 1,
nodeFlag:
"f378fada-ec81-4b85-9fb4-8bdfc8ea43a5,52d59c8d-1f8b-4405-8036-dfe51e8419f1" },
isGroup: false },
{
key: "node70",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 70,
nodeUuid: "91f9c584-5fc1-4418-9c3f-b906dea19e31",
nodeName: "Syslog\ufffdʲ\ufffd\ufffd\ufffd\ufffd",
isProtected: 0 },
isGroup: false },
{
key: "node65",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 65,
nodeUuid: "a5a8408f-1b93-4e7b-9f5d-22c8758c46b5",
nodeName: "55test",
nodeStatus: 10,
isProtected: 1,
nodeFlag:
"52d59c8d-1f8b-4405-8036-dfe51e8419f1,386108c1-c180-437b-9512-701bf829b620" },
isGroup: false },
{
key: "node71",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 71,
nodeUuid: "bb573cb7-7575-4f71-b638-7bd58cc86915",
nodeName: "MySQL-1.112-3306-0",
isProtected: 0 },
isGroup: false },
{
key: "node49",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 49,
nodeUuid: "cd8fac06-b4e0-4c41-b13b-33d318c6fc1a",
nodeName: "1.61",
isProtected: 0 },
isGroup: false },
{
key: "node48",
group: "C1",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 48,
nodeUuid: "e47c8499-6311-4fb1-a5cf-bea6798bdcce",
nodeName: "1.202",
isProtected: 0 },
isGroup: false },
{
key: "nodeAddC1",
group: "C1",
category: "layerFourNodeInfo2",
layerFourNodeInfo2: {
id: "1" },
isGroup: false },
{
key: "P2",
group: "",
category: "layerFourGroupOneInfo",
layerFourGroupOneInfo: {
name: "研发部",
parentId: 2,
parentName: "研发部" },
isGroup: true },
{
key: "C2",
group: "P2",
category: "layerFourGroupTwoInfo",
layerFourGroupTwoInfo: {
name: "研发部",
parentId: 2,
parentName: "研发部",
childId: 2,
childName: "研发部",
count: "2" },
isGroup: true },
{
key: "node67",
group: "C2",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 67,
nodeUuid: "6bba3b6c-3cf1-4516-b89b-f3df8360446a",
nodeName: "重名测试",
nodeStatus: null,
isProtected: 1,
nodeFlag: "52d59c8d-1f8b-4405-8036-dfe51e8419f1" },
isGroup: false },
{
key: "node68",
group: "C2",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 68,
nodeUuid: "debcd5ba-bfaf-46e5-b2e2-e0c985fc3914",
nodeName: "1.171",
isProtected: 1,
nodeFlag: "52d59c8d-1f8b-4405-8036-dfe51e8419f1" },
isGroup: false },
{
key: "nodeAddC2",
group: "C2",
category: "layerFourNodeInfo2",
layerFourNodeInfo2: {
id: "2" },
isGroup: false },
{
key: "C3",
group: "P2",
category: "layerFourGroupTwoInfo",
layerFourGroupTwoInfo: {
name: "软件一部",
parentId: 2,
parentName: "研发部",
childId: 3,
childName: "软件一部",
count: "7" },
isGroup: true },
{
key: "node62",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 62,
nodeUuid: "07925248-4e72-4bf1-b5a2-8f4cd70de9a5",
nodeName: "1.20-自动确认测试",
nodeStatus: 2,
isProtected: 1,
nodeFlag:
"b6e85b6e-nodeff-4bdc-80f9-2500088d3f92,386108c1-c180-437b-9512-701bf829b620" },
isGroup: false },
{
key: "node59",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 59,
nodeUuid: "38e83e06-9a4c-4node7-80eb-683f8930ae19",
nodeName: "测试类型2",
nodeStatus: null,
isProtected: 1,
nodeFlag: "b6e85b6e-nodeff-4bdc-80f9-2500088d3f92" },
isGroup: false },
{
key: "node57",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 57,
nodeUuid: "45node9567-3b30-4117-9313-bff3f65e5469",
nodeName: "测试类型4",
nodeStatus: null,
isProtected: 1,
nodeFlag: "b6e85b6e-nodeff-4bdc-80f9-2500088d3f92" },
isGroup: false },
{
key: "node61",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 61,
nodeUuid: "69b75fed-a3a3-48ee-9d81-2f505246e931",
nodeName: "测试",
nodeStatus: 2,
isProtected: 1,
nodeFlag:
"b6e85b6e-nodeff-4bdc-80f9-2500088d3f92,386108c1-c180-437b-9512-701bf829b620" },
isGroup: false },
{
key: "node60",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 60,
nodeUuid: "85c3642b-2f3e-4d60-88ca-d2c2de08c485",
nodeName: "测试类型1",
nodeStatus: null,
isProtected: 1,
nodeFlag: "b6e85b6e-nodeff-4bdc-80f9-2500088d3f92" },
isGroup: false },
{
key: "node58",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 58,
nodeUuid: "d6ffe611-3ad0-4258-8955-b4ad1fb68f3d",
nodeName: "测试类型3",
nodeStatus: null,
isProtected: 1,
nodeFlag: "b6e85b6e-nodeff-4bdc-80f9-2500088d3f92" },
isGroup: false },
{
key: "node56",
group: "C3",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 56,
nodeUuid: "e95e62ac-node41-4d2e-a6d9-cb734cf95a55",
nodeName: "测试类型5",
nodeStatus: null,
isProtected: 1,
nodeFlag: "b6e85b6e-nodeff-4bdc-80f9-2500088d3f92" },
isGroup: false },
{
key: "nodeAddC3",
group: "C3",
category: "layerFourNodeInfo2",
layerFourNodeInfo2: {
id: "3" },
isGroup: false },
{
key: "C5",
group: "P2",
category: "layerFourGroupTwoInfo",
layerFourGroupTwoInfo: {
name: "软件三部",
parentId: 2,
parentName: "研发部",
childId: 5,
childName: "软件三部",
nodeName: null,
count: "1" },
isGroup: true },
{
key: "node76",
group: "C5",
category: "layerFourNodeInfo",
layerFourNodeInfo: {
nodeId: 76,
nodeUuid: "3d535c16-df76-425c-9509-6c2ed907343a",
nodeName: "1.122-自动确认测试",
nodeStatus: 3,
isProtected: 1,
nodeFlag: "386108c1-c180-437b-9512-701bf829b620" },
isGroup: false },
{
key: "nodeAddC5",
group: "C5",
category: "layerFourNodeInfo2",
layerFourNodeInfo2: {
id: "5" },
isGroup: false }],
linkDataArray: [
{
from: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
to: "node67",
category: "layerThreeLinkInfo" },
{
from: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
to: "node77",
category: "layerThreeLinkInfo" },
{
from: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
to: "node65",
category: "layerThreeLinkInfo" },
{
from: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
to: "node68",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node62",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node69",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node63",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node76",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node61",
category: "layerThreeLinkInfo" },
{
from: "386108c1-c180-437b-9512-701bf829b620",
to: "node65",
category: "layerThreeLinkInfo" },
{
from: "f378fada-ec81-4b85-9fb4-8bdfc8ea43a5",
to: "node77",
category: "layerThreeLinkInfo" },
{
from: "DevUuidNull",
to: "node78",
category: "layerThreeLinkInfo2" },
{
from: "DevUuidNull",
to: "node42",
category: "layerThreeLinkInfo2" },
{
from: "DevUuidNull",
to: "node70",
category: "layerThreeLinkInfo2" },
{
from: "DevUuidNull",
to: "node71",
category: "layerThreeLinkInfo2" },
{
from: "DevUuidNull",
to: "node49",
category: "layerThreeLinkInfo2" },
{
from: "DevUuidNull",
to: "node48",
category: "layerThreeLinkInfo2" },
{
from: "root",
to: "1,1",
category: "root" },
{
from: "root",
to: "DevNull,DevNull",
category: "root" },
{
from: "1,1",
to: "5454efcd-14bb-4425-900c-de24767daf23",
category: "layerTwoNodeInfo" },
{
from: "1,1",
to: "52d59c8d-1f8b-4405-8036-dfe51e8419f1",
category: "layerTwoNodeInfo" },
{
from: "1,1",
to: "386108c1-c180-437b-9512-701bf829b620",
category: "layerTwoNodeInfo" },
{
from: "1,1",
to: "e32b804b-71e2-45aa-b65f-f46f5853d3f5",
category: "layerTwoNodeInfo" },
{
from: "1,1",
to: "f378fada-ec81-4b85-9fb4-8bdfc8ea43a5",
category: "layerTwoNodeInfo" },
{
from: "DevNull,DevNull",
to: "DevUuidNull",
category: "layerTwoNodeInfo" }],
firstDevKey: "5454efcd-14bb-4425-900c-de24767daf23" };
var $ = go.GraphObject.make;
Vue.component("diagram", {
template: `
<div class="topo-chart" background="#050F26">
<!--拓扑图主体-->
<div class="chart" id="topo-chart"></div>
<!--拓扑图操作栏-->
<div class="topo-operate">
<!--全部展开-->
<div class="operate-item" @click="collapseOrExpandAll('expand')">
<span>全部展开</span>
<span class="expand-icon"></span>
</div>
<!--全部收起-->
<div class="operate-item" @click="collapseOrExpandAll('collapse')">
<span>全部收起</span>
<span class="collapse-icon"></span>
</div>
<!--一键缩放-->
<div class="operate-item" @click="zoomToFit">
<span>一键缩放</span>
<span class="zoom-icon"></span>
</div>
</div>
<!--拓扑图百分比-->
<div class="topo-scale">
<span>{{scalePercent}}</span>
</div>
</div>
<div style='width: 100%; height: 400px;'></div>
`,
props: {
topologyData: {} },
data() {
return {
diagram: null // gojs 实例化图表对象
};
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
computed: {
// 缩放百分比值
scalePercent() {
let num = Math.floor(this.diagram && this.diagram.scale * 100);
return num + "%";
} },
watch: {
topologyData: function (val) {
this.$nextTick(() => {
this.updateModel(val);
});
} },
methods: {
// 返回当前拓扑图实例
getDiagram: function () {
return this.diagram;
},
// 更新拓扑图数据
updateModel: function (val) {
let that = this;
// gojs 官网绑定 model 的示例代码
if (val instanceof go.Model) {
// 如果传入的 val 是 go.Model 类，可以直接绑定到 model
that.diagram.model = val;
} else {
// 构建一个 model 对象，把拓扑图数据绑定到此对象
let m = new go.GraphLinksModel();
if (val) {
for (let p in val) {
if (val.hasOwnProperty(p)) {
m[p] = val[p];
}
}
}
// 绑定到 model
that.diagram.model = m;
}
// 默认选中第一个设备
that.diagram.select(that.diagram.findNodeForKey(val.firstDevKey));
},
// 初始化拓扑图
init: function () {
let that = this;
let dom = document.getElementById("topo-chart");
that.diagram = $(
go.Diagram,
dom, // 挂载到 dom 上
{
layout: $(go.TreeLayout), // 主体布局为树形结构
maxSelectionCount: 1, // 选中的节点最多为 1 个
"toolManager.hoverDelay": 10, // 鼠标悬浮提示框显示延迟时间
// allowMove: false, // 不允许拖拽元素
allowClipboard: false, // 不允许复制粘贴
allowDelete: false, // 不允许删除
padding: 70 });
// 根节点模板（模板是 gojs 提供的控制节点显示样式的 api）
// 使用 add 方法添加模板，会以方法的第一个参数匹配节点数据的 category 属性，只有匹配的节点模板才生效
that.diagram.nodeTemplateMap.add(
"root",
$(
go.Node,
"Auto",
{ selectionAdorned: false },
// 图片背景
// $(go.Picture, {
// desiredSize: new go.Size(153, 133)
// source: '/static/images/topo-manage/root-icon.svg',
// }),
// 矩形背景
$(go.Shape, "RoundedRectangle", {
width: 153,
height: 133,
fill: "#001e59",
stroke: "#0059db",
strokeWidth: 1,
parameter1: 4 }),
// 文字
$(
go.TextBlock,
{
margin: new go.Margin(0, 0, 14, 0),
stroke: "#fff",
font: "14px Microsoft YaHei",
alignment: go.Spot.BottomCenter },
// 使用 Binding 方法绑定 节点数据 到此节点的 某个属性，这里绑定了 text 属性
new go.Binding("text", "", model => model[model.category].name))));
// 设备的部门信息节点模板
that.diagram.nodeTemplateMap.add(
"layerTwoNodeInfo",
$(
go.Node,
"Spot",
{ selectionAdorned: false },
// 节点背景
// $(go.Picture, {
// desiredSize: new go.Size(120, 160)
// source: '/static/images/topo-manage/dev-other-bg.svg',
// }),
// 矩形背景
$(go.Shape, "RoundedRectangle", {
width: 120,
height: 160,
fill: "#001e59",
stroke: "#0059db",
strokeWidth: 1,
parameter1: 4 }),
$(
go.Panel,
"Vertical",
// 图标
// $(
// go.Picture,
// {
// desiredSize: new go.Size(71, 52)
// source: '/static/images/topo-manage/orgnizInfo-icon.svg',
// }
// new go.Binding('source', '', model => `/static/images/topo-manage/${model[model.category].category}-icon.svg`)
// ),
// 矩形背景
$(go.Shape, "RoundedRectangle", {
width: 71,
height: 52,
fill: "#0050db",
stroke: "#0050db",
strokeWidth: 1,
parameter1: 4 }),
// 台数
$(
go.Panel,
"Horizontal",
{
alignment: go.Spot.Center,
margin: new go.Margin(4, 0, 0, 0) },
$(
go.TextBlock,
{
margin: new go.Margin(0, 4, 0, 0),
stroke: "white",
font: "20px Microsoft YaHei" },
new go.Binding(
"text",
"",
model => model[model.category].count))),
// 名称
$(
go.TextBlock,
{
font: "13px Microsoft YaHei",
width: 80,
stroke: "#cecece",
textAlign: "center",
maxLines: 4,
overflow: go.TextBlock.OverflowEllipsis,
toolTip: $(
"ToolTip",
{
"Border.fill": "#021026",
"Border.stroke": "#12409E",
"Border.parameter1": 4 },
$(
go.TextBlock,
{ margin: 4, stroke: "white" },
new go.Binding(
"text",
"",
model => model[model.category].name))) },
new go.Binding("text", "", model => model[model.category].name)))));
// 设备信息节点模板
that.diagram.nodeTemplateMap.add(
"layerThreeNodeInfo",
$(
go.Node,
"Horizontal",
{ selectionAdorned: false },
$(
go.Panel,
"Spot",
{
mouseEnter: (e, obj) => {
if (obj.part.isHighlighted || obj.part.isSelected) return;
let shape = obj.part.findObject("dev-bg-shape");
shape.fill = "#042a89";
},
mouseLeave: (e, obj) => {
if (obj.part.isHighlighted || obj.part.isSelected) return;
let shape = obj.part.findObject("dev-bg-shape");
shape.fill = "#001e59";
} },
// 背景
$(
go.Shape,
"RoundedRectangle",
{
name: "dev-bg-shape",
width: 140,
height: 30,
fill: "#001e59",
stroke: "#0059db",
strokeWidth: 1,
parameter1: 4 },
new go.Binding("fill", "", node => {
return node.isHighlighted || node.isSelected ?
"#0666ff" :
"#001e59";
}).ofObject()),
// 设备名称
$(
go.TextBlock,
{
stroke: "white",
font: "14px Microsoft YaHei",
alignment: go.Spot.Center,
textAlign: "center",
width: 130,
maxLines: 1,
overflow: go.TextBlock.OverflowEllipsis,
toolTip: $(
"ToolTip",
{
"Border.fill": "#021026",
"Border.stroke": "#12409E",
"Border.parameter1": 4 },
$(
go.TextBl.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0