uni-app用css編寫族譜樹家譜樹

需求背景：公司接到一個項目，是需要做一個族譜微信小程序，需要有族譜樹，且可以添加家族人員。

靈感來源：在插件市場中下載了作者羊羊不想寫代碼的插件tree-list族譜，樹形列表，可縮放滑動 - DCloud 插件市場，根據作者的代碼邏輯增加了橫向的樹結構，使用簡單。

父組件引用：（數據在用的時候從后端請求）

<template><view class=""><view class="switch-btn" @click="switchRow">{{switchName}}</view><!-- 人物關系圖 --><template><view class="genealogy-tree"><movable-area :style="{height: '100vh',width: '100vw'}"><movable-view @scale="changeScale" :scale="true" :scale-max="1" :scale-min="0.5" class="max" direction="all":style="{width: `${treeConfig.width}px`,height: `${treeConfig.height}px`}"><div class="tree-content"><columnTreeList v-if="switchName == '豎向'" :tree-data="treeData" :tree-first="true" /><rowTreeList v-else :tree-data="treeData" :tree-first="true" /></div></movable-view></movable-area></view></template></view>
</template><script setup>import {ref,provide,nextTick,watch,getCurrentInstance,onMounted} from 'vue';import columnTreeList from '@/components/column-tree-list.vue'import rowTreeList from '@/components/row-tree-list.vue';const switchName = ref('橫向')let scale = ref(1); // 縮放倍率const instance = getCurrentInstance(); // 獲取組件實例let treeConfig = ref({ // movable-view移動區域大小width: 0,height: 800})/*** 獲取元素信息* @param {String} domID dom元素id* */const getDomInfo = (domID) => {return new Promise((resolve, reject) => {const bar = uni.createSelectorQuery().in(instance);bar.select(domID).boundingClientRect(res => {if (res) resolve(res);else reject()}).exec();})}// 樹形結構數據let treeData = ref([{id: 1,name: '祖宗',child: [{id: 2,name: '爺爺',spouse: {id: 2001,name: '奶奶',},child: [{id: 3,name: '父親',spouse: {id: 3001,name: '媽媽',},child: [{id: 4,name: '自己',},{id: 9,name: '妹妹',}]},{id: 5,name: '二伯',},]},{id: 6,name: '二大爺',child: [{id: 7,name: '大叔',},{id: 8,name: '二叔',},]}]}])// 刪除provide('delItem', (item) => {treeData.value = deleteNodeById(treeData.value, item.id);})/*** 添加子級* @param { object } item 當前點擊的對象* */provide('addItem', (item) => {const data = {id: Math.floor(Math.random() * 1000), // 唯一鍵后續自行設置name: '新增子級',}handleData(item.id, treeData.value, data, 1)})/*** 添加配偶* @param { object } item 當前點擊的對象* */provide('addSpouse', (item) => {console.log(31231, item);const data = {id: Math.floor(Math.random() * 100), // 唯一鍵后續自行設置name: '配偶',}handleData(item.id, treeData.value, data, 2)})/*** 遞歸對樹形結構添加節點* @param {number | string} id 唯一鍵* @param { Array } 樹形結構數組* @param { Object } obj 添加的數據 {id,name,...}* @param { number } type 添加的類型 1：子級，2：配偶* */const handleData = (id, data, obj, type) => {data.forEach(item => {if (item.id === id) {// 在這里處理新增子級還是配偶if (type === 1) {item.child ? item.child.push(obj) : item.child = [obj]} else if (type === 2) {// 如果存在配偶這里賦值將進行替換// 如需多配偶需自行改為數組形式（tree-list里的spouse也需要同步修改為數組）item.spouse = obj;}} else {if (item.child) {handleData(id, item.child, obj, type)}}})return data}/*** 遞歸刪除樹形結構元素* @param { Array } tree 樹形結構數據* @param { number | string } id 唯一鍵* */const deleteNodeById = (tree, targetId) => {for (let i = 0; i < tree.length; i++) {const node = tree[i];if (node.id === targetId) {console.log('找到了', node);// 使用 splice 刪除節點tree.splice(i, 1);return tree; // 返回新的數組}if (node.child && node.child.length > 0) {// 遞歸查找子節點node.child = deleteNodeById(node.child, targetId);}}return tree; // 沒有找到目標節點，返回原數組}// 設置移動縮放大小const setTreeConfig = () => {nextTick(() => {setTimeout(() => {getDomInfo('.tree-content').then(res => {treeConfig.value = {width: res.width / scale.value,height: res.height / scale.value}console.log('返回值',res);})}, 200)})}const changeScale = (e) => {scale.value = e.detail.scale;console.log('縮放',e.detail)}// 轉換const switchRow = () => {switchName.value = switchName.value == '橫向' ? '豎向' : '橫向'}// 監聽樹形結構數據變化watch(treeData.value, (newVal, oldVal) => {setTreeConfig()})onMounted(() => {setTreeConfig()})
</script><style lang="scss" scoped>.genealogy-tree {min-height: 100%;min-width: 100vw;position: relative;overflow-x: scroll;// overflow: hidden;.tree-content {position: absolute;top: 0;left: 0;transition: all .3s;}}::v-deep .uni-table-th {color: #000 !important;}::v-deep .uni-table-td {color: #000 !important;}.th-bg {background-color: #d9d9d9;}.switch-btn {position: fixed;top: 30rpx;right: 30rpx;height: 50rpx;width: 100rpx;border-radius: 20rpx;background-color: #f8f8f8;box-shadow: 0 6rpx 0rpx 4rpx #00000080;font-size: 20rpx;line-height: 50rpx;text-align: center;z-index: 99;}
</style>

子組件：子組件自我遞歸調用（原作者代碼---豎向樹結構）

<template><view class="card"><view class="ul"><view class="li" v-for="(item,index) in treeData" :key="index"><view class="item" :class="{'line-left': index !== 0, 'line-right': index != treeData.length - 1}"><view class="item-name" :class="{'line-bottom':item.child && item.child.length > 0,'line-top':!treeFirst}"><view class="content"><image src="@/static/logo.png" mode="widthFix" style="width: 40rpx;height: auto;border-radius: 50%;"></image><text class="name">{{item.name}}</text><button class="btn" @click="addItem(item)">添加子級</button><button class="btn" @click="addSpouse(item)">添加配偶</button><button class="btn" @click="delItem(item)">刪除當前</button></view><!-- 配偶 --><view class="content-2" v-if="item.spouse"><image src="@/static/logo.png" mode="widthFix" style="width: 40rpx;height: auto;border-radius: 50%;"></image><text class="name">{{item.spouse.name}}</text></view></view></view><column-tree-list v-if="item.child && item.child.length > 0" :tree-data="item.child"></column-tree-list></view></view></view>
</template><script setup name="column-tree-list">import columnTreeList from '@/components/column-tree-list.vue'import {inject} from 'vue'const delItem = inject('delItem')const addItem = inject('addItem')const addSpouse = inject('addSpouse')defineProps(['treeData', 'treeFirst'])
</script><style lang="scss" scoped>$line-length: 20px; //線長$spacing: 20px; //間距$extend: calc(#{$spacing}); //延長線// 線樣式@mixin line {content: "";display: block;width: 1px;height: $line-length;position: absolute;left: 0;right: 0;margin: auto;background: #e43934;}.card {.ul {display: flex;justify-content: center;.li {.item {display: flex;justify-content: center;align-items: center;position: relative;&-name {position: relative;display: flex;justify-content: center;align-items: center;margin: $spacing 10rpx;.content,.content-2 {display: flex;flex-direction: column;align-items: center;background: #fff;padding: 20rpx;border-radius: 16rpx;box-sizing: border-box;box-shadow: 0px 5rpx 30rpx 5rpx rgba(0, 0, 0, 0.08);.name {margin: 10rpx 0 18rpx;color: #222;font-size: 20rpx;}}.content-2 {display: flex;flex-direction: column;align-self: flex-start;margin-left: 10rpx;}}}}}// 向下的線.line-bottom {&::after {@include line();bottom: -$line-length;}}// 向上的線.line-top {&::before {@include line();top: -$line-length;}}// 向左的線.line-left {&::after {@include line();width: calc(50% + #{$spacing});height: 1px;left: calc(-50% - #{$extend});top: 0;}}// 向右的線.line-right {&::before {@include line();width: calc(50% + #{$spacing});height: 1px;right: calc(-50% - #{$extend});top: 0;}}}.btn {font-size: 18rpx;width: 116rpx;height: 45rpx;}
</style>

橫向樹結構：

<template><view class="vmPage"><view class="sub-branch" v-for="(item,index) in treeData" :key="index"><view class="item" :class="{'line-top': index !== 0, 'line-bottom': index !== treeData.length - 1}"><view class="item-name" :class="{'line-right':item.child && item.child.length > 0,'line-left':!treeFirst}"><view class="content"><image src="@/static/logo.png" mode="widthFix" style="width: 40rpx;height: auto;border-radius: 50%;"></image><text class="name">{{item.name}}</text><view class="btn" @click="addItem(item)">添加子級</view><view class="btn" @click="addSpouse(item)">添加配偶</view><view class="btn" @click="delItem(item)">刪除當前</view></view><!-- 配偶 --><view class="content-2" v-if="item.spouse"><image src="@/static/logo.png" mode="widthFix" style="width: 40rpx;height: auto;border-radius: 50%;"></image><text class="name">{{item.spouse.name}}</text></view></view></view><row-tree-list v-if="item.child && item.child.length > 0" :tree-data="item.child"></row-tree-list></view></view>
</template><script setup name="row-tree-list">import {ref,inject} from 'vue'import rowTreeList from '@/components/row-tree-list.vue';const delItem = inject('delItem')const addItem = inject('addItem')const addSpouse = inject('addSpouse')defineProps(['treeData', 'treeFirst'])
</script><style lang="scss" scoped>$line-length: 30rpx;$spacing: 30rpx;$extend: calc(#{$spacing});$line-color: #e43934;// 線樣式@mixin line {content: "";display: block;width: 1rpx;height: $line-length;position: absolute;top: 0;bottom: 0;margin: auto;background: #e43934;}@mixin flex-center {display: flex;justify-content: center;align-items: center;}.vmPage {display: flex;justify-content: center;flex-direction: column;.sub-branch {display: flex;.item {@include flex-center();position: relative;.item-name {position: relative;flex-direction: column;@include flex-center();align-items: flex-start;margin: 10rpx $spacing;}}}}.content,.content-2 {@include flex-center();background: #fff;padding: 20rpx;box-sizing: border-box;border-radius: 16rpx;box-shadow: 0px 5rpx 30rpx 5rpx rgba(0, 0, 0, 0.08);.name {display: inline-block;font-size: 20rpx;margin: 0 8rpx 0 20rpx;width: 30rpx;}.btn {font-size: 18rpx;width: 30rpx;text-align: center;padding: 8rpx;background-color: #f8f8f8;border: 1px solid rgba(0, 0, 0, .2);border-radius: 6rpx;}}// 向右的線.line-right {&::after {@include line();right: - $line-length;width: $line-length;height: 1rpx;}}// 向左的線.line-left {&::before {@include line();left: - $line-length;width: $line-length;height: 1rpx;}}// 向上的線.line-top {&::after {@include line();height: calc(50% + $line-length);left: 0;top: calc(-50% - $line-length);}}// 向下的線.line-bottom {&::before {@include line();height: calc(50% + $line-length);left: 0;bottom: calc(-50% - $line-length);}}
</style>