tree组件（几种不同分叉树Vue3）

效果图：

基础树组件（本人博客里面有）

https://blog.csdn.net/xfy991127/article/details/140346861?spm=1001.2014.3001.5501

下面是工作需求改造后

父组件

<template><div class="go-JJTree" id="tree-scroll" @wheel="handleWheel($event)"><div class="treewrapper"><tree-menuclass="tree":list="treeList":r1Config="r1Config":r2Config="r2Config":r3Config="r3Config":endConfig="endConfig":lineWidth="lineWidth":line="line":line1="line1":gap="gap":tipConfig="tipConfig":unit="unit":num1="num1":num2="num2"></tree-menu></div></div>
</template><script setup lang="ts">
import { ref } from "vue";
import TreeMenu from "../../components/TreeMenu/index.vue";const handleWheel = (e: any) => {e.preventDefault();const treeScroll = document.getElementById("tree-scroll");if (treeScroll) {treeScroll.scrollLeft += e.deltaY;}
};const treeList = ref([{name: "高端装备制造产业",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02",lastId: "",show: true,rank: 1,isEnd: false,comNum: "",children: [{name: "智能制造装备产业",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-01",lastId: "ins-01-02",show: true,rank: 2,isEnd: false,comNum: "",children: [{name: "机器人与增材设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-011",lastId: "ins-01-02-01",show: true,rank: 3,isEnd: false,comNum: "",children: [{name: "工业机器人制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0111",lastId: "ins-01-02-011",show: true,rank: 4,isEnd: true,comNum: "",},{name: "特殊作业机器人制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0112",lastId: "ins-01-02-011",show: true,rank: 4,isEnd: true,comNum: "",},{name: "增材制造装备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0113",lastId: "ins-01-02-011",show: true,rank: 4,isEnd: true,comNum: "",},{name: "服务消费机器人制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0114",lastId: "ins-01-02-011",show: true,rank: 4,isEnd: true,comNum: "",},],},{name: "其他智能设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-014",lastId: "ins-01-02-01",show: true,rank: 3,isEnd: false,comNum: "",children: [{name: "金属表面处理及热处理加工",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0141",lastId: "ins-01-02-014",show: true,rank: 4,isEnd: true,comNum: "",},{name: "其他未列明金属制品制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0142",lastId: "ins-01-02-014",show: true,rank: 4,isEnd: true,comNum: "",},{name: "生产专用起重机制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0143",lastId: "ins-01-02-014",show: true,rank: 4,isEnd: true,comNum: "",},{name: "生产专用车辆制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0144",lastId: "ins-01-02-014",show: true,rank: 4,isEnd: true,comNum: "",},{name: "连续搬运设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0145",lastId: "ins-01-02-014",show: true,rank: 4,isEnd: true,comNum: "",},{name: "其他物料搬运设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0146",lastId: "ins-01-02-014",show: true,rank: 4,isEnd: true,comNum: "",},{name: "其他未列明通用设备制造业",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0147",lastId: "ins-01-02-014",show: true,rank: 4,isEnd: true,comNum: "",},{name: "食品、酒、饮料及茶生产专用设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0148",lastId: "ins-01-02-014",show: true,rank: 4,isEnd: true,comNum: "",},{name: "农副食品加工专用设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0149",lastId: "ins-01-02-014",show: true,rank: 4,isEnd: true,comNum: "",},{name: "机械化农业及园艺机具制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-01410",lastId: "ins-01-02-014",show: true,rank: 4,isEnd: true,comNum: "",},{name: "其他农、林、牧、渔业机械制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-01411",lastId: "ins-01-02-014",show: true,rank: 4,isEnd: true,comNum: "",},],},{name: "智能关键基础零部件制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-015",lastId: "ins-01-02-01",show: true,rank: 3,isEnd: false,comNum: "",children: [{name: "液压动力机械及元件制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0151",lastId: "ins-01-02-015",show: true,rank: 4,isEnd: true,comNum: "",},{name: "液力动力机械及元件制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0152",lastId: "ins-01-02-015",show: true,rank: 4,isEnd: true,comNum: "",},{name: "气压动力机械及元件制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0153",lastId: "ins-01-02-015",show: true,rank: 4,isEnd: true,comNum: "",},{name: "滚动轴承制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0154",lastId: "ins-01-02-015",show: true,rank: 4,isEnd: true,comNum: "",},{name: "齿轮及齿轮减、变速箱制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0155",lastId: "ins-01-02-015",show: true,rank: 4,isEnd: true,comNum: "",},{name: "机械零部件加工",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0156",lastId: "ins-01-02-015",show: true,rank: 4,isEnd: true,comNum: "",},{name: "其他通用零部件制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0157",lastId: "ins-01-02-015",show: true,rank: 4,isEnd: true,comNum: "",},{name: "其他未列明通用设备制造业",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0158",lastId: "ins-01-02-015",show: true,rank: 4,isEnd: true,comNum: "",},{name: "微特电机及组件制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0159",lastId: "ins-01-02-015",show: true,rank: 4,isEnd: true,comNum: "",},{name: "变压器、整流器和电感器制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-01510",lastId: "ins-01-02-015",show: true,rank: 4,isEnd: true,comNum: "",},],},{name: "智能制造相关服务",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-016",lastId: "ins-01-02-01",show: true,rank: 3,isEnd: false,comNum: "",children: [{name: "通用设备修理",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0161",lastId: "ins-01-02-016",show: true,rank: 4,isEnd: true,comNum: "",},{name: "专用设备修理",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0162",lastId: "ins-01-02-016",show: true,rank: 4,isEnd: true,comNum: "",},{name: "仪器仪表修理",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0163",lastId: "ins-01-02-016",show: true,rank: 4,isEnd: true,comNum: "",},],},],},{name: "海洋工程装备产业",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-05",lastId: "ins-01-02",show: true,rank: 2,isEnd: false,comNum: "",children: [{name: "海洋工程装备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-051",lastId: "ins-01-02-05",show: true,rank: 3,isEnd: false,comNum: "",children: [{name: "金属切割及焊接设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0511",lastId: "ins-01-02-051",show: true,rank: 4,isEnd: true,comNum: "",},{name: "海洋工程装备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0512",lastId: "ins-01-02-051",show: true,rank: 4,isEnd: true,comNum: "",},],},{name: "深海石油钻探设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-052",lastId: "ins-01-02-05",show: true,rank: 3,isEnd: false,comNum: "",children: [{name: "深海石油钻探设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0521",lastId: "ins-01-02-052",show: true,rank: 4,isEnd: true,comNum: "",},],},{name: "其他海洋相关设备与产品制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-053",lastId: "ins-01-02-05",show: true,rank: 3,isEnd: false,comNum: "",children: [{name: "涂料制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0531",lastId: "ins-01-02-053",show: true,rank: 4,isEnd: true,comNum: "",},{name: "农副食品加工专用设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0532",lastId: "ins-01-02-053",show: true,rank: 4,isEnd: true,comNum: "",},{name: "渔业机械制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0533",lastId: "ins-01-02-053",show: true,rank: 4,isEnd: true,comNum: "",},{name: "地质勘查专用设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0534",lastId: "ins-01-02-053",show: true,rank: 4,isEnd: true,comNum: "",},{name: "潜水装备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0535",lastId: "ins-01-02-053",show: true,rank: 4,isEnd: true,comNum: "",},{name: "水下救捞装备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0536",lastId: "ins-01-02-053",show: true,rank: 4,isEnd: true,comNum: "",},{name: "发电机及发电机组制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0537",lastId: "ins-01-02-053",show: true,rank: 4,isEnd: true,comNum: "",},{name: "电力电子元器件制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0538",lastId: "ins-01-02-053",show: true,rank: 4,isEnd: true,comNum: "",},{name: "通信系统设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0539",lastId: "ins-01-02-053",show: true,rank: 4,isEnd: true,comNum: "",},],},{name: "海洋环境监测与探测装备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-054",lastId: "ins-01-02-05",show: true,rank: 3,isEnd: false,comNum: "",children: [{name: "船用配套设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0541",lastId: "ins-01-02-054",show: true,rank: 4,isEnd: true,comNum: "",},{name: "雷达及配套设备制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0542",lastId: "ins-01-02-054",show: true,rank: 4,isEnd: true,comNum: "",},{name: "环境监测专用仪器仪表制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0543",lastId: "ins-01-02-054",show: true,rank: 4,isEnd: true,comNum: "",},{name: "导航、测绘、气象及海洋专用仪器制造",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0544",lastId: "ins-01-02-054",show: true,rank: 4,isEnd: true,comNum: "",},],},{name: "海洋工程建筑及相关服务",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-055",lastId: "ins-01-02-05",show: true,rank: 3,isEnd: false,comNum: "",children: [{name: "海洋油气资源开发利用工程建筑",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0551",lastId: "ins-01-02-055",show: true,rank: 4,isEnd: true,comNum: "",},{name: "海洋能源开发利用工程建筑",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0552",lastId: "ins-01-02-055",show: true,rank: 4,isEnd: true,comNum: "",},{name: "财产保险",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0553",lastId: "ins-01-02-055",show: true,rank: 4,isEnd: true,comNum: "",},{name: "律师及相关法律服务",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0554",lastId: "ins-01-02-055",show: true,rank: 4,isEnd: true,comNum: "",},{name: "工程和技术研究和试验发展",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0555",lastId: "ins-01-02-055",show: true,rank: 4,isEnd: true,comNum: "",},{name: "其他海洋服务",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0556",lastId: "ins-01-02-055",show: true,rank: 4,isEnd: true,comNum: "",},{name: "工程管理服务",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0557",lastId: "ins-01-02-055",show: true,rank: 4,isEnd: true,comNum: "",},{name: "工程设计活动",imgPathUrl: require("@/assets/images/tree/treebg.png"),id: "ins-01-02-0558",lastId: "ins-01-02-055",show: true,rank: 4,isEnd: true,comNum: "",},],},],},],},
]);const r1Config = ref({width: 150,height: 80,line: 25,fontSize: 14,fontFamily: "AlibabaPuHuiTi_2_85_Bold",color: "#fff",open: true,
});
const r2Config = ref({width: 150,height: 80,fontSize: 14,fontFamily: "AlibabaPuHuiTi_2_85_Bold",color: "#fff",
});const r3Config = ref({width: 150,height: 80,fontSize: 14,fontFamily: "AlibabaPuHuiTi_2_85_Bold",color: "#fff",
});
const endConfig = ref({width: 130,height: 80,fontSize: 14,fontFamily: "AlibabaPuHuiTi_2_85_Bold",color: "#fff",lateX: 5,
});const tipConfig = {size: 20,lateX: 10,lateY: -10,
};const lineWidth = ref(3);
const line = ref(30);
const line1 = ref(15);
const gap = ref(25);
const unit = ref("家");
const num1 = ref(5);
const num2 = ref(4);
</script><style lang="scss" scoped>
.go-JJTree {overflow: scroll;background-color: #000;height: 1000px;.treewrapper {min-width: 100%;.tree {margin: 0 auto;}}&::-webkit-scrollbar {display: none;}
}
</style>

子组件 

<template><div class="treeBox" v-if="obj" :style="treeBoxStyle"><divv-for="(item, index) in obj":key="item.id":class="getNodeClass(index)"><div class="nodeBgname"><divclass="tip"v-show="!item.isEnd"@click="toggleNode(item)":style="{...getTipStyle,get backgroundImage() {return `url(${item.show? require('@/assets/images/tree/open.png'): require('@/assets/images/tree/colse.png')})`;},}"></div><divclass="bg":class="{ xia: shouldShowBottomLine(item), shang: shang2 }"@click="toggleNode(item)"><div@click.stop="handleClick(item)":class="getNodeContentClass(item)":style="getNodeContentStyle(item)">{{ handleStr(item) }}</div></div></div><div v-if="item.show"><divclass="group"v-if="shouldShowGroupLayout(item)":style="getGroupStyle(item)"><divv-for="child in item.children":key="child.id"class="end2"@click="handleClick(child)":style="getEndNodeStyle(child)">{{ handleStr(child) }}</div></div><divv-else-if="shouldShowGridLayout(item)":style="getGridLayoutStyle(item)"><div class="line" :style="getGridLineStyle(item)"></div><divv-for="child in item.children":key="child.id"class="end1"@click="handleClick(child)":style="getEndNodeStyle(child)">{{ handleStr(child) }}</div></div><divv-else-if="shouldShowRegularLayout(item)":style="getRegularLayoutStyle(item)"><div class="line" :style="getRegularLineStyle(item)"></div><divv-for="child in item.children":key="child.id"class="end"@click="handleClick(child)":style="getEndNodeStyle(child)">{{ handleStr(child) }}</div></div><div v-else><tree-menu:list="item.children":shang2="true":num="item.children?.length || 0":r1Config="r1Config":r2Config="r2Config":r3Config="r3Config":endConfig="endConfig":lineWidth="lineWidth":line="line":line1="line1":gap="gap":unit="unit":num1="num1":num2="num2":tipConfig="tipConfig"@treeclick="handleClick"/></div></div></div></div>
</template><script setup lang="ts">
import { ref, watch, reactive, computed } from "vue";
import TreeMenu from "./index.vue";const props = defineProps({list: {type: Array,default: () => [],},shang2: {type: Boolean,default: false,},num: {type: Number,default: 0,},r1Config: {type: Object,default: () => ({}),},r2Config: {type: Object,default: () => ({}),},r3Config: {type: Object,default: () => ({}),},endConfig: {type: Object,default: () => ({}),},tipConfig: {type: Object,default: () => ({}),},lineWidth: {type: Number,default: 3,},line: {type: Number,default: 25,},line1: {type: Number,default: 25,},gap: {type: Number,default: 20,},unit: {type: String,default: "家",},num1: {type: Number,default: 5,},num2: {type: Number,default: 4,},
});const emit = defineEmits(["treeclick"]);const obj = ref<any[]>([]);// 计算属性
const treeBoxStyle = computed(() => {return {bottom: obj.value.length === 1 ? `${-props.line + 10}px` : undefined,};
});// 方法定义
const getNodeClass = (index: number) => {return {heng: !(index === props.num - 1) && props.num,zou: index > 0,};
};// 折叠展开样式
const getTipStyle = computed(() => {return {position: "absolute",top: "50%",right: "-10px",width: `${props.tipConfig.size}px`,height: `${props.tipConfig.size}px`,transform: `translate(${props.tipConfig.lateX}px, ${props.tipConfig.lateY}px)`,backgroundRepeat: "no-repeat",backgroundSize: "100% 100%",};
});const getNodeContentClass = (item: any) => {return {r1: item.rank === 1,r2: item.rank === 2,r3: item.rank >= 3,};
};const getNodeContentStyle = (item: any) => {return {display: "flex",justifyContent: "center",alignItems: "center",backgroundRepeat: "no-repeat",backgroundSize: "100% 100%",backgroundImage: `url(${item.imgPathUrl})`,zIndex: "-1",textAlign: "center",};
};const getEndNodeStyle = (item: any) => {return {position: "relative",display: "flex",justifyContent: "center",alignItems: "center",backgroundRepeat: "no-repeat",backgroundSize: "100% 100%",backgroundImage: `url(${item.imgPathUrl})`,marginTop: "10px",textAlign: "center",};
};// 布局判断方法
const shouldShowGroupLayout = (item: any) => {if (!item.children) return false;const allEnd =item.children.filter((c: any) => c.isEnd).length === item.children.length;return allEnd && item.children.length > props.num1 * 2;
};const shouldShowGridLayout = (item: any) => {if (!item.children) return false;const allEnd =item.children.filter((c: any) => c.isEnd).length === item.children.length;return allEnd && item.children.length > props.num1;
};const shouldShowRegularLayout = (item: any) => {if (!item.children) return false;const allEnd =item.children.filter((c: any) => c.isEnd).length === item.children.length;return allEnd && item.children.length > 1;
};// 样式计算方法
const getGroupStyle = (item: any) => {return {display: "grid",width: `${props.endConfig.width * Math.ceil(item.children.length / props.num2) +15 * Math.floor(item.children.length / props.num2)}px`,gridTemplateColumns: `repeat(${Math.ceil(item.children.length / props.num2)}, ${props.endConfig.width}px)`,gap: "15px",border: "3px solid #1b63a6",padding: "10px",transform: `translateY(${props.line - 13}px)`,};
};const getGridLayoutStyle = (item: any) => {return {display: "grid",width: `${props.endConfig.width * 2 + 10}px`,gridTemplateColumns: `${props.endConfig.width}px ${props.endConfig.width}px`,gap: "10px",overflow: "hidden",transform: "translateY(-10px)",};
};const getGridLineStyle = (item: any) => {return {width: "3px",height: "3000px",position: "absolute",backgroundColor: "#1b63a6",left: "50%",bottom: `${props.endConfig.height - 40}px`,transform: "translateX(-50%)",};
};const getRegularLayoutStyle = (item: any) => {return {zIndex: 100,padding: "10px 5%",position: "relative",overflow: "hidden",transform: `translateX(${props.endConfig.lateX}px)`,bottom: getBottomPosition(item.rank),};
};const getRegularLineStyle = (item: any) => {return {width: "3px",height: "3000px",position: "absolute",backgroundColor: "#1b63a6",left: "0px",bottom: `${props.endConfig.height - 30}px`,};
};const getBottomPosition = (rank: number) => {switch (rank) {case 1:return `${props.line * 3 - props.r1Config.height}px`;case 2:return `${props.line * 3 - props.r2Config.height}px`;case 3:return `${props.line * 3 - props.r3Config.height}px`;default:return undefined;}
};// 业务逻辑方法
const shouldShowBottomLine = (item: any) => {// 如果没有子节点，不显示下划线if (!item.children || item.children.length === 0) return false;// 如果所有子节点都是末端节点，不显示下划线const allChildrenAreEnd =item.children.filter((c: any) => c.isEnd).length === item.children.length;if (allChildrenAreEnd) return false;// 如果子节点未展开，不显示下划线if (!item.show) return false;// 显示下划线的条件：有子节点、子节点处于展开状态、且有非末端节点return item.children.length > 0;
};const toggleNode = (item: any) => {if (item.children) {item.show = !item.show;}
};const handleStr = (item: any) => {const reg = /.{8}|.+$/g;return (item.name.match(reg).join("\n") + "\n" + `(${item.comNum + props.unit})`);
};const handleClick = (item: any) => {emit("treeclick", item);
};watch(() => props.list,(newList) => {if (newList) {const arr = newList.map((item) => {if (typeof item === "object" && item !== null) {return { ...item };}return item;});obj.value = arr;}},{ immediate: true, deep: true }
);
</script><style lang="scss" scoped>
* {margin: 0;padding: 0;
}.r1 {width: calc(max(1px, v-bind("r1Config.width || 100") * 1px));height: calc(max(1px, v-bind("r1Config.height || 30") * 1px));font-size: calc(max(1px, v-bind("r1Config.fontSize || 12") * 1px));color: v-bind("r1Config.color || '#fff'");font-family: v-bind("r1Config.fontFamily || 'sans-serif'");
}.r2 {width: calc(max(1px, v-bind("r2Config.width || 80") * 1px));height: calc(max(1px, v-bind("r2Config.height || 25") * 1px));font-size: calc(max(1px, v-bind("r2Config.fontSize || 11") * 1px));color: v-bind("r2Config.color || '#fff'");font-family: v-bind("r2Config.fontFamily || 'sans-serif'");
}.r3 {width: calc(max(1px, v-bind("r3Config.width || 60") * 1px));height: calc(max(1px, v-bind("r3Config.height || 20") * 1px));font-size: calc(max(1px, v-bind("r3Config.fontSize || 10") * 1px));color: v-bind("r3Config.color || '#fff'");font-family: v-bind("r3Config.fontFamily || 'sans-serif'");margin: 0 0;
}.end,
.end1,
.end2 {width: calc(max(1px, v-bind("endConfig.width || 50") * 1px));height: calc(max(1px, v-bind("endConfig.height || 20") * 1px));font-size: calc(max(1px, v-bind("endConfig.fontSize || 10") * 1px));color: v-bind("endConfig.color || '#fff'");font-family: v-bind("endConfig.fontFamily || 'sans-serif'");
}.end {&::before {content: "";width: calc(max(1px, v-bind("line1 || 25") * 1px));height: calc(max(1px, v-bind("lineWidth || 3") * 1px));position: absolute;bottom: 50%;left: 0%;transform: translateX(-50%);background-color: #1b63a6;z-index: -1;}
}.end1 {&:nth-of-type(odd)::before {content: "";width: calc(max(1px, v-bind("line1 || 25") * 1px));height: calc(max(1px, v-bind("lineWidth || 3") * 1px));position: absolute;bottom: 50%;left: 0%;transform: translateX(-50%);background-color: #1b63a6;z-index: -1;}&:nth-of-type(even)::before {content: "";width: calc(max(1px, v-bind("line1 || 25") * 1px));height: calc(max(1px, v-bind("lineWidth || 3") * 1px));position: absolute;bottom: 50%;left: 100%;transform: translateX(-50%);background-color: #1b63a6;z-index: -1;}
}.treeBox {display: flex;color: #fff;width: fit-content;
}.nodeBgname {width: 150px;height: calc(max(1px, (v-bind("line || 25") * 3) * 1px));display: flex;margin: 0 auto;img {width: 100%;height: 100%;}
}.bg {margin: 0 auto;position: absolute;left: 50%;transform: translateX(-50%);
}div {position: relative;word-break: break-all;white-space: pre-line;
}/* 下线条 */
.xia::after {content: "";width: calc(max(1px, v-bind("lineWidth || 3") * 1px));height: calc(max(1px, v-bind("line || 25") * 1px));position: absolute;left: 50%;top: 100%;transform: translateX(-50%);background-color: #1b63a6;z-index: -1;
}/* 上线条 */
.shang::before {content: "";width: calc(max(1px, v-bind("lineWidth || 3") * 1px));height: calc(max(1px, v-bind("line || 25") * 1px));position: absolute;top: calc(max(-1000px, v-bind("line || 25") * -1px));left: 50%;transform: translateX(-50%);background-color: #1b63a6;z-index: -1;
}.group::before {content: "";width: calc(max(1px, v-bind("lineWidth || 3") * 1px));height: calc(max(1px, v-bind("line || 25") * 1px));position: absolute;top: calc(max(-1000px, v-bind("line || 25") * -1px));left: 50%;transform: translateX(-50%);background-color: #1b63a6;
}.heng,
.zou {padding: 0 calc(max(1px, v-bind("gap || 20") * 1px));top: 50px;
}/* 横线条 */
.heng::after {content: "";width: 50%;height: calc(max(1px, v-bind("lineWidth || 3") * 1px));position: absolute;left: 50%;top: calc(max(-1000px, v-bind("line || 25") * -1px));background-color: #1b63a6;
}.zou::before {content: "";width: 50%;height: calc(max(1px, v-bind("lineWidth || 3") * 1px));position: absolute;left: 0;top: calc(max(-1000px, v-bind("line || 25") * -1px));background-color: #1b63a6;
}
</style>

直接复制可以使用~~~