更新记录
1.0.1(2025-03-28) 下载此版本
1、新增 成员关系树形图横屏旋转 2、优化 其他已知问题调整
1.0.0(2025-03-26) 下载此版本
V1.0.0 1、创建成员关系图 2、支持拖动、缩放 3、支持节点点击回调
平台兼容性
uni-app Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙 - - - - - - - - - 微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟 - - - - - - - - - - - uni-app x Chrome Safari Android iOS 鸿蒙 微信小程序 - - - - - -环境:Vue2
已知支持平台:H5、移动端APP(安卓IOS兼容)、微信小程序
使用示例
复制代码<view> <fg-tree :list="list"></fg-tree> </view>
组件参数说明
参数名称 参数说明 类型 默认值 是否必传 list 节点列表数据 期望格式见下文 Array - 是 width 拖动容器宽度 Number 2000 单位px 建议不小于此数值 否 height 拖动容器高度 Number 2000 单位px 建议不小于此数值 否 direction 拖动的支持方向 同movable-view原文档 String all 否 friction 摩擦系数,同movable-view原文档 Number 4 否 disabled 是否禁用 Boolean false 否 scale 是否支持双指缩放 Boolean true 否 @check 节点点击回调 Function - - resetView ref 复位方法 Function - -list期望格式:
复制代码list: [ { id: "1740017918265162", // id name: "杨耀祖", // 姓名 relation: "始祖", // 关系 isLife: false, // 是否建在 spouse: [ // 配偶信息 { id: "174341726866254", name: "王巾帼", relation: "妻子", isLife: false, }, ], children: [ // 子级信息 { id: "174012791856862", name: "杨大朗", relation: "长子", isLife: true, spouse: [ { id: "174861626826224", name: "刘爱花", relation: "妻子", isLife: true, }, ], children: [ { id: "1744417268638412", name: "杨小鱼", relation: "长子", isLife: true, spouse: [ { id: "174861121856224", name: "何依依", relation: "妻子", isLife: true, }, ], children: [ { id: "174341726886581", name: "杨宗伟", relation: "长子", isLife: true, spouse: [], children: [] }, ] }, ], },{ id: "174341726886571", name: "杨二郎", relation: "次子", isLife: true, spouse: [], children: [] } ] } ]
更新日志
V1.0.11、成员关系图 横屏旋转
2、其他已知修复
V1.0.01、创建成员关系图
2、支持拖动、缩放
3、支持节点点击回调