Vue3自研开源Tree组件：人性化的拖拽API设计

2024/10/24 1:59:53 来源：https://blog.csdn.net/felix_alone2012/article/details/140775767 浏览: 次关键词：Vue3自研开源Tree组件：人性化的拖拽API设计

针对Element Plus Tree组件拖拽功能API用的麻烦，小卷开发了一个API使用简单的JuanTree组件。拖拽功能用起来非常简单！

组件的使用很简单：

在这里插入图片描述

通过ref引用tree组件，可操作其expose出来的方法，比如，保存节点操作（新增、删除和重命名节点）的变更、新增一级节点：

在这里插入图片描述

通过v-model绑定勾选项，data属性绑定初始化树形结构的嵌套数据，option-props用于绑定组件的选项：

在这里插入图片描述

allowDrop方法，用来让用户控制哪些节点不允许drop操作；当然哪些节点不允许drag也可以由相应的方法来控制，比如下面的逻辑控制：

在这里插入图片描述

比如44这个节点无法拖动：

在这里插入图片描述

演示拖拽drop的限制，Java Web节点不能释放在a11或a22节点上，超过了5级限制。

在这里插入图片描述

在拖拽完成后，节点的勾选状态能保证一致性

在这里插入图片描述

在编辑节点的情况下，要先保存变更才能继续拖拽

在这里插入图片描述

提供了便捷的拖拽回调接口

在这里插入图片描述

这里给用户进行拖拽的后台API提供了必要的参数，如果参数不够可以后期再扩展，同时提供了回调的done函数，调用了done()才更新拖拽后的节点，非常的人性化！

在这里插入图片描述

见后续会员教程分享

相关资讯