瘋狂擼碼中ing

實現組件效果?

?src/components/sgTopo.vue

<template><!-- 強哥的拓撲圖2021.09.14 --><divclass="sg-topo tree-body"v-if="data":arrow-right="data.body.arrowRight":style="data.body.style || {}"><divclass="topo-title main-node":active="data.body.title.active":style="data.body.title.style || {}">{{ data.body.title.text }}</div><ulclass="topo-container":style="data.body.container ? data.body.container.style || {} : {}"><li class="tree-level" v-for="(a, $i) in data.body.data" :key="$i"><!-- 拓撲圖類型：1 ------------------------------------------><div v-if="a.type == 1" :type="a.type"><span:active="a.title.active":style="a.title.style || {}"class="node-title">{{ a.title.text }}</span><!-- 二級樹 --><div v-if="a.children" class="topo-childrens"><divclass="tree-body"grayv-for="(child, $i) in a.children":key="$i"><div class="tree-level"><span:active="child.title.active":style="child.title.style || {}"class="topo-title"gray>{{ child.title.text }}</span><ul class="topo-container"><!-- 三級節點 --><li:active="childNode.title.active":style="childNode.title.style || {}"v-for="(childNode, $i) in child.data":key="$i"class="node-title"border>{{ childNode.title.text }}</li></ul></div></div></div></div><!-- 拓撲圖類型：2 ------------------------------------------><div v-if="a.type == 2" :type="a.type"><span:active="a.title.active":style="a.title.style || {}"class="node-title">{{ a.title.text }}</span><!-- 二級樹 --><ul v-if="a.children" class="topo-childrens"><li class="tree-level" v-for="(child, $i) in a.children" :key="$i"><span:active="child.title.active":style="child.title.style || {}"class="topo-title">{{ child.title.text }}</span><ul v-if="child.children" class="topo-childrens"><!-- 三級節點 --><liv-for="(childNode, $i) in child.children":key="$i"class="tree-level"><span:active="childNode.title.active":style="childNode.title.style || {}"class="topo-title">{{ childNode.title.text }}</span></li></ul></li></ul></div><!-- 拓撲圖類型：3 ------------------------------------------><!-- 這個類型太沒規律了，擔心設計師的腦回路有一定問題 --></li></ul></div>
</template><script>
export default {props: ["data"],
};
</script><style lang="scss" scoped>
@import "~@/css/sg";
.tree-body {height: min-content;position: relative;display: inline-block;background: #ffffff;border-radius: 4px;border: 1px dashed #0050b3;box-sizing: border-box;padding: 10px;&[gray] {background: #ffffff;border-radius: 4px;border: 1px dashed #dddddd;box-sizing: border-box;padding: 10px;display: inline-block;font-size: 12px;width: min-content;flex-shrink: 0;}&[arrow-right]::after {content: url(~@/assets/softwareIndustryBigBrain/common/tree-body/tree-body-arrow.jpg); //右上角的向右箭頭圖片position: absolute;right: -22px;top: -10px;}.topo-title {transition: 0.618s ease;pointer-events: none;cursor: pointer;box-sizing: border-box;text-align: center;width: calc(100% - 40px);height: 30px;line-height: 26px;padding: 0 20px;margin: 0 auto;margin-top: -25px;background: #002766;border-radius: 4px;font-size: 16px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #ffffff;&[gray] {padding: 0 10px;height: 22px;background: #f0f2f5;border-radius: 11px;font-size: 12px;font-weight: 400;color: #999999;line-height: 22px;display: inline-block;width: min-content;white-space: nowrap;display: block;margin-top: -20px;}&.main-node[active] {pointer-events: auto;&:hover {background: #0050b3!important;}}}.topo-container {margin-top: 15px;.node-title {pointer-events: none;display: inline-block;height: 30px;padding: 0 20px;background: #40a9ff;border-radius: 4px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #ffffff;line-height: 26px;display: inline-block;width: min-content;white-space: nowrap;cursor: pointer;transition: 0.618s ease;&:hover {background: #0050b3;}&[active] {pointer-events: auto;background: #0050b3;&:hover {background: #0050b3cc;}}}[type="1"] {text-align: center;.topo-childrens {display: flex;justify-content: space-evenly;margin-top: 40px;position: relative;&::before {content: "";width: 1px;height: 16px;background: #40a9ff;position: absolute;top: -42px;}&::after {content: "";width: 50px; //二級橫線寬度height: 1px;background: #40a9ff;position: absolute;top: -26px;}> * {position: relative;// 默認的節點⊥&::before {position: absolute;content: "";// width: 100%;width: 0;height: 16px;// border-radius: 4px;box-sizing: border-box;border-right: 1px solid #40a9ff;top: -27px;}//第一個節點頂部的曲線╭&:first-of-type {&::before {border: 1px solid #40a9ff;border-top-left-radius: 4px;border-right: none;left: 50%;width: 50%;border-bottom: none;}}//最后一個節點頂部的曲線╮&:last-of-type {&::before {border: 1px solid #40a9ff;border-top-right-radius: 4px;border-left: none;right: 50%;width: 50%;border-bottom: none;}}}}.node-title[border] {pointer-events: none;background: #ffffff;border: 1px solid #40a9ff;color: #40a9ff;margin-bottom: 10px;&:last-of-type {margin-right: 0;margin-bottom: 0;}cursor: pointer;transition: 0.618s ease;&:hover {color: #0050b3;border-color: #0050b3;}&[active] {pointer-events: auto;color: #0050b3;border-color: #0050b3;&:hover {background: #40a9ff33;}}}}.tree-level {margin-bottom: 10px;&:last-of-type {margin-right: 0;margin-bottom: 0;}}}
}
// ----------------------------------------
[type="2"] {width: min-content;margin: 0 auto;.tree-level {margin-top: -5px;width: min-content;margin-left: 20px;//二級元素 第一個節點的左側線條└&:first-of-type .topo-title::before {height: 25px;top: -11px;}}.topo-title {pointer-events: none;margin-top: 15px;background: #ffffff;border: 1px solid #40a9ff;color: #40a9ff;font-size: 14px;height: 30px;line-height: 26px;display: block;width: min-content;white-space: nowrap;box-sizing: border-box;position: relative;cursor: pointer;transition: 0.618s ease;+ .topo-childrens {margin-top: 10px;.tree-level {.topo-title {margin-right: -30px;margin-top: 15px;//二級元素 常規點的左側線條└&::before {height: 40px;top: -26px;}//二級元素延長線|&::after {content: "";position: absolute;top: -25px;left: -36px;height: 40px;width: 1px;background: #40a9ff;}}//三級元素 第一個節點的左側線條└&:first-of-type .topo-title::before {height: 25px;top: -11px;}}}&:hover {color: #0050b3;border-color: #0050b3;}/* &[active] {&:hover {color: #0044b1;border-color: #0044b1;}} */&[active] {pointer-events: auto;color: #0050b3;border-color: #0050b3;&:hover {background: #40a9ff33;}}&::before {content: "";position: absolute;left: -16px;top: -25px;width: 16px;height: 40px;box-sizing: border-box;border: 1px solid #40a9ff;border-top: 0;border-right: 0;}}> .topo-childrens {display: flex;flex-wrap: wrap;margin-top: 0px;> .tree-level {margin-top: -5px;margin-bottom: 0;}}.topo-childrens {flex-direction: column;.tree-level:last-of-type {position: relative;// 用于隱藏二級元素左側最后多余的延長線|&::after {content: "";position: absolute;top: 30px;left: -15px;width: 1px;height: calc(100% - 40px);background: white;}// 最后一個節點元素左側線條╰> .topo-title:last-of-type {&::before {border-bottom-left-radius: 4px;}}}}
}
</style>

引用組件示例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>

總結

以上是生活随笔為你收集整理的【sgTopo】强哥古法炮制、纯手工打造简单拓扑图、流程图、思维导图组件（完善中ing）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。