更新记录

1.0.3（2025-04-17） 下载此版本

版本1.0.3 支持添加配偶，修复添加节点时滑动和缩放问题

1.0.2（2024-03-04） 下载此版本

不支持vue2

1.0.1（2024-02-23） 下载此版本

插件描述

平台兼容性

tree-list --是一个css绘制的树形结构，支持缩小，滑动，添加，删除。

vue3--使用

<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">
                    <tree-list :tree-data="treeData" :tree-first="true" />
                </div>
            </movable-view>
        </movable-area>
    </view>
</template>

<script setup>
    import {
        ref,
        provide,
        nextTick,
        watch,
        getCurrentInstance,
        onMounted
    } from 'vue';
    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
                    }
                })
            }, 200)
        })
    }

    const changeScale = (e) => {
        scale.value = e.detail.scale;
    }

    // 监听树形结构数据变化
    watch(treeData.value, (newVal, oldVal) => {
        setTreeConfig()
    })

    onMounted(() => {
        setTreeConfig()
    })
</script>

<style lang="scss" scoped>
    .genealogy-tree {
        min-height: 100%;
        position: relative;
        overflow: hidden;

        .tree-content {
            position: absolute;
            top: 0;
            left: 0;
            transition: all .3s;
        }
    }
</style>