Vue3 组合式实现 带连接线的Tree型 架构图(一级树形图)

在这里插入图片描述
创建组件名称 TreeNodeView.vue

<template><div class="tree-node"><div class="node">{{ rootNodeName }}</div><div class="children" :style="childrenLineStyle"><div class="child-node" v-for="node in childNodes" :key="node.id"><div class="node">{{ node.name }}</div></div></div></div>
</template><script setup>
import {computed, ref, onMounted} from 'vue';const props = defineProps({childNodes: {type: Array,required: true},rootNodeName: {type: String,required: true,},
});const childNode = ref(null);
const childrenWidth = ref(null);
const childrenMarginLeft = ref(null);const childrenLineStyle = computed(() => {if (!childNode.value) {return {};}const getWidth = (element) => {const style = getComputedStyle(element);return parseFloat(style.width) + parseFloat(style.marginLeft) + parseFloat(style.marginRight);};let allNodeWidth = Array.from(childNode.value).reduce((total, node) => total + getWidth(node), 0);const firstNodeWidth = getWidth(childNode.value[0]) / 2;let lastNodeWidth = 0;if (childNode.value.length > 1) {lastNodeWidth = getWidth(childNode.value[childNode.value.length - 1]) / 2;}childrenWidth.value = `${allNodeWidth - firstNodeWidth - lastNodeWidth}px`;childrenMarginLeft.value = `${firstNodeWidth}px`;return {};
});onMounted(() => {childNode.value = document.querySelectorAll('.child-node');
});
</script><style>
.tree-node {display: inline-flex;flex-direction: column;align-items: center;
}.node {border: 1px solid #000;padding: 5px;position: relative;
}.children {display: flex;justify-content: center;position: relative;margin-top: 45px;
}.children::before {content: '';height: 25px;border: 0.00001rem solid #000;position: absolute;top: -46px;
}.child-node {position: relative;margin-left: 10px;margin-right: 10px;
}.child-node::before {content: '';position: absolute;top: -20px;left: 50%;transform: translateX(-50%);height: 20px;border-left: 1px solid #000;
}.children::after {content: '';position: absolute;top: -20px;left: 0;right: 0;border-top: 1px solid #000;width: v-bind(childrenWidth);margin-left: v-bind(childrenMarginLeft);
}
</style>
<template><div class="tree-node"><TreeNodeView v-bind="nodeViewConfig"></TreeNodeView></div>
</template><script setup>
import TreeNodeView from "./components/TreeNodeView.vue";const nodeViewConfig = {rootNodeName: '根节点',childNodes: [{id: 1, name: '节点1-1'},{id: 2, name: '节点222222221-2'},{id: 3, name: '节点1-3'},{id: 4, name: '节点1-4222222'},{id: 5, name: '节点1-4'},{id: 6, name: '节点1-4'}]
}
</script><style scoped></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/196471.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

12月4日作业

完成沙发床的多继承 #include <iostream>using namespace std;class Sofa { private:string sit;int *price; public:Sofa() {cout << "Sofa::无参构造函数" << endl;}Sofa(string sit,int price):sit(sit),price((new int(price))){cout <<…

AutoHotKey-study

目录 使用编辑器脚本注意函数解释信息调试方法键盘获取方法脚本练习 最近发现常用键盘的上下左右箭头去操作输入输出问题感觉很不是滋味&#xff0c;不像Linux那样&#xff0c;有vim的使用&#xff0c;就想着有没有什么方法更快捷&#xff0c;更方便的去使用电脑键盘&#xff0…

分享80个菜单导航JS特效,总有一款适合您

分享80个菜单导航JS特效&#xff0c;总有一款适合您 80个菜单导航JS特效下载链接&#xff1a;https://pan.baidu.com/s/1NgNc759Kg1of_8vR7kaj6A?pwd6666 提取码&#xff1a;6666 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;…

pip的基本命令和使用

pip 简介 pip是Python官方的包管理器&#xff0c;可以方便地安装、升级和卸载Python包。 pip 常用命令 显示版本和路径 pip --version获取帮助 pip --help升级pip和升级包 pip install --upgrade pip # Linux/macOS pip install -U pip # windowspip install…

【Cesium】模型平面裁切

const scene viewer.scene;let tileset; let targetY 400.0; let planeEntities []; let selectedPlane; // 选择的切面 let clippingPlanes; // 切面属性// 当鼠标点击切面时&#xff0c;修改相关属性 const downHandler new Cesium.ScreenSpaceEventHandler(viewer.sce…

表达式二叉树的中序遍历:2017年408算法题

算法思想 表达式二叉树的中序遍历即中缀表达式除了根节点和叶结点&#xff0c;遍历到其他结点时在遍历其左子树前加上左括号&#xff0c;在遍历完右子树后加上右括号 算法实现 //中序遍历&#xff0c;deep从1开始&#xff0c;即根节点的深度为1 void midOrder(BTree T,int …

作业12.4

1.沙发床的多继承 #include <iostream>using namespace std; class Sofa { private:string sit; public://无参构造Sofa(){}//有参构造Sofa(string sit):sit(sit){}//拷贝构造Sofa(const Sofa &other):sit(other.sit){}//拷贝赋值Sofa &operator (const Sofa &…

【数据分享】2015-2023年我国区县逐月二手房房价数据(Excel/Shp格式)

房价是一个城市发展程度的重要体现&#xff0c;一个城市的房价越高通常代表这个城市越发达&#xff0c;对于人口的吸引力越大&#xff01;因此&#xff0c;房价数据是我们在各项城市研究中都非常常用的数据&#xff01;之前我们分享过2015-2023年我国地级市逐月房价数据&#x…

基于姿态估计的3D动画生成

在本文中&#xff0c;我们将尝试通过跟踪 2D 视频中的动作来渲染人物的 3D 动画。 在 3D 图形中制作人物动画需要大量的运动跟踪器来跟踪人物的动作&#xff0c;并且还需要时间手动制作每个肢体的动画。 我们的目标是提供一种节省时间的方法来完成同样的任务。 我们对这个问题…

MATLAB学习QPSK之QPSK_MOD_DEMOD_SALIMup分析

学习的背景说明 因为在学习5G物理层&#xff0c;一直很忙&#xff0c;没有时间。最近稍有一点空闲&#xff0c;所以&#xff0c;学习一下算法。 QPSK的算法&#xff0c;虽然说我没有完全学透&#xff0c;大致还是懂的。只能一直没时间用MATLAB来研究一下。 然后看到这个实例&…

YITH WooCommerce Social Login跨境电商网站社交登录高级版插件

点击阅读YITH WooCommerce Social Login跨境电商网站社交登录高级版插件原文 YITH WooCommerce Social Login跨境电商网站社交登录高级版插件让您的用户节省时间并通过他们的社交资料之一登录或注册网站。 您如何从中受益&#xff1a; 用户无需填写表格、插入个人数据&#…

【数据分享】我国12.5米分辨率的地形粗糙度(起伏度)数据(免费获取)

地形数据&#xff0c;也叫DEM数据&#xff0c;是我们在各项研究中最常使用的数据之一。之前我们分享过源于NASA地球科学数据网站发布的12.5米分辨率DEM地形数据&#xff01;基于该数据我们处理得到12.5米分辨率的坡度数据、坡向数据、山体阴影数据&#xff08;均可查看之前的文…

基于Python的6+1号码生成器

&#x1f388; 博主&#xff1a;一只程序猿子 &#x1f388; 博客主页&#xff1a;一只程序猿子 博客主页 &#x1f388; 个人介绍&#xff1a;爱好(bushi)编程&#xff01; &#x1f388; 创作不易&#xff1a;如喜欢麻烦您点个&#x1f44d;或者点个⭐&#xff01; &#x1f…

(C++)盛水最多的容器--双指针法

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能&#xff0c;轻松拿下世界 IT 名企 Dream Offer。https://le…

掌握排序的艺术:Python中sorted()函数全面解析!

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 1. 引言 排序在编程中是一个基本且重要的操作&#xff0c;而 Python 中的 sorted() 函数则为我们提供了强大的排序能力。在本篇文章中&#xff0c;我们将深入研究不同排序算法、sorted() 函数的灵活性&#xff…

数据结构与算法之美学习笔记:30 | 图的表示:如何存储微博、微信等社交网络中的好友关系?

目录 前言如何理解“图”&#xff1f;邻接矩阵存储方法邻接表存储方法解答开篇内容小结 前言 本节课程思维导图&#xff1a; 微博、微信这些社交软件我想你肯定都玩过吧。在微博中&#xff0c;两个人可以互相关注&#xff1b;在微信中&#xff0c;两个人可以互加好友。那你知道…

项目管理实践:如何进行项目分解?

项目管理是一个复杂的工程&#xff0c;作为项目管理者&#xff0c;项目经理应该有着统筹管理项目全局的能力。 创建一个项目计划可分为四步&#xff1a; 1、明确项目目标 项目在成立或创建之初就要有清晰明确的目标&#xff1b; 项目达到什么目的&#xff1f; 项目目标是…

安美数字酒店宽带运营系统 SQL注入漏洞复现

0x01 产品简介 HiBOS酒店宽带运营系统隶属于安美世纪(北京)科技有限公司开发的一套酒店宽带管理系统。 0x02 漏洞概述 安美数字酒店宽带运营系统 online_status.php、language.php等接口处存在SQL注入漏洞,未经身份认证的攻击者可以通过此漏洞获取数据库权限,进一步利用可…

快手视频如何去掉水印?三个简单好用视频去水印方法

快手视频如何去掉水印&#xff1f;尽管新兴的短视频平台如春笋般涌现&#xff0c;吸引了众多观众在业余时间浏览和分享视频&#xff0c;快手作为当下主流短视频之一&#xff0c;许多自媒体创作者也常常会下载一些热门的视频素材进行二次编辑。然而&#xff0c;他们都可能会面临…

【超详细教程】基于html+js实现轮播图

轮播图是现代网页设计中常见的元素之一&#xff0c;它能够展示多张图片或内容&#xff0c;在有限的空间内循环播放&#xff0c;提升网页的视觉效果和用户体验。下面将以一个简单的网页轮播图为例&#xff0c;说明如何基于HTML和JavaScript实现。 ​ 1、R5Ai智能助手 chatgpt国…