【sgTopo】强哥古法炮制、纯手工打造简单拓扑图、流程图、思维导图组件（完善中ing）（一）https://developer.aliyun.com/article/1476836
引用组件示例demo
<template> <div class="sg-body"> <div style="padding: 30px; display: flex"> <sg-topo :data="data1" style="margin-right: 25px" /> <sg-topo :data="data2" style="margin-right: 25px" /> <sg-topo :data="data3" style="margin-right: 25px" /> <sg-topo :data="data4" style="margin-right: 25px" /> <sg-topo :data="data5" style="margin-right: 25px" /> <sg-topo :data="data6" style="margin-right: 25px" /> </div> </div> </template> <script> import sgTopo from "../components/sgTopo"; export default { components: { sgTopo, }, data() { return { // 数据使用 data1: { body: { arrowRight: true, title: { active: true, //交互开启 text: "一级内容", style: { width: "150px", background: "#002766", }, }, style: { width: "300px", }, data: [ { type: 1, title: { active: true, //交互开启 text: "二级内容", }, }, { type: 1, title: { text: "二级内容", }, }, { type: 1, title: { text: "二级内容", }, }, { type: 1, title: { text: "二级内容", }, children: [ { title: { text: "三级标题", }, data: [ { title: { active: true, //交互开启 text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, ], }, { title: { text: "三级标题", }, data: [ { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, ], }, ], }, ], }, }, data2: { body: { arrowRight: true, title: { text: "一级内容", style: { width: "150px", background: "#002766", }, }, style: { width: "230px", }, data: [ { type: 1, title: { active: true, //交互开启 text: "二级内容", }, }, { type: 1, title: { active: true, //交互开启 text: "二级内容", style: { background: "#0050B3", }, }, }, { type: 1, title: { text: "二级内容", }, }, { type: 1, title: { text: "二级内容", style: { background: "#0050B3", }, }, }, { type: 1, title: { text: "二级内容", }, }, { type: 1, title: { text: "二级内容", }, }, ], }, }, data3: { body: { arrowRight: true, title: { text: "一级内容", style: { width: "150px", background: "#002766", }, }, style: { width: "230px", }, data: [ { type: 2, title: { text: "二级内容", }, children: [ { title: { text: "三级内容", }, /* children: [ { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, ], */ }, { title: { text: "三级内容", }, data: [ { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, ], }, { title: { text: "三级内容", }, }, ], }, { type: 2, title: { text: "二级内容", }, children: [ { title: { text: "三级内容", }, /* children: [ { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, ], */ }, { title: { text: "三级内容", }, data: [ { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, ], }, { title: { text: "三级内容", }, }, ], }, ], }, }, data4: { body: { arrowRight: true, title: { text: "一级内容", style: { width: "150px", background: "#002766", }, }, style: { width: "280px", }, container: { style: { display: "flex", "flex-wrap": "wrap", "justify-content": "space-between", }, }, data: [ { type: 2, title: { text: "二级内容", }, children: [ { title: { text: "三级内容", }, children: [ { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, ], }, { title: { text: "三级内容", }, data: [ { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, ], }, { title: { text: "三级内容", }, }, ], }, { type: 2, title: { text: "二级内容", }, children: [ { title: { text: "三级内容", }, /* children: [ { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, ], */ }, { title: { text: "三级内容", }, data: [ { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, ], }, { title: { text: "三级内容", }, }, ], }, ], }, }, data5: { body: { arrowRight: true, title: { text: "一级内容", style: { width: "150px", color: "#002766", background: "#f0f2f5", }, }, style: { width: "250px", }, container: { style: { display: "flex", "flex-wrap": "wrap", }, }, data: [ { type: 2, title: { text: "标签", style: { "margin-right": "10px", }, }, }, { type: 2, title: { text: "标签", style: { "margin-right": "10px", background: "#0050b3", }, }, }, { type: 2, title: { text: "标签", style: { "margin-right": "10px", background: "#0050b3", }, }, }, { type: 2, title: { text: "标签1234567", style: { "margin-right": "10px", background: "#0050b3", }, }, }, { type: 2, title: { text: "标签1237", style: { "margin-right": "10px", }, }, }, { type: 2, title: { text: "标签127", style: { "margin-right": "10px", }, }, }, { type: 2, title: { text: "标签12347", style: { "margin-right": "10px", }, }, }, { type: 2, title: { text: "标签67", style: { "margin-right": "10px", }, }, }, { type: 2, title: { text: "标签1247", style: { "margin-right": "10px", background: "#0050b3", }, }, }, { type: 2, title: { text: "标签1234567", style: { "margin-right": "10px", }, }, }, { type: 2, title: { text: "标签7", style: { "margin-right": "10px", }, }, }, { type: 2, title: { text: "标签147", style: { "margin-right": "10px", }, }, }, { type: 2, title: { text: "标签1567", style: { "margin-right": "10px", background: "#0050b3", }, }, }, ], }, }, data6: { body: { // arrowRight: true, title: { text: "一级内容", style: { width: "190px", color: "#002766", background: "#f0f2f5", }, }, style: { width: "440px", }, container: { style: { display: "flex", "flex-wrap": "wrap", }, }, data: [ { type: 2, title: { text: "区块链硬件", }, children: [ { title: { text: "三级内容", style: { color: "#ffffff", background: "#40a9ff", }, }, children: [ { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, children: [ { title: { text: "四级内容", }, }, { title: { text: "四级内容", }, }, { title: { text: "四级内容", }, }, { title: { text: "四级内容", }, }, ], }, { title: { text: "三级内容", }, }, ], }, { title: { text: "三级内容", style: { color: "#ffffff", background: "#40a9ff", }, }, children: [ { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, { title: { text: "三级内容", }, }, ], }, { title: { text: "三级内容", style: { color: "#ffffff", background: "#40a9ff", }, }, children: [ { title: { text: "三级内容", }, }, ], }, { title: { text: "三级内容", style: { color: "#ffffff", background: "#40a9ff", }, }, }, ], }, ], }, }, }; }, }; </script>
