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

Java小卷

已于 2024-07-29 17:11:49 修改

阅读量197

点赞数 10

分类专栏： Vue3开源组件实战文章标签： vue3 vite 自定义Tree拖拽

于 2024-07-29 17:10:00 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/felix_alone2012/article/details/140775767

版权

Vue3开源组件实战专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

文章目录

使用示例

组件的使用很简单：

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

allowDrag

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

在这里插入图片描述

allowDrop

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

在这里插入图片描述

支持节点勾选

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

在这里插入图片描述

支持dirty检测

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

在这里插入图片描述

后台API交互

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

在这里插入图片描述

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

在这里插入图片描述

源码实现

见后续会员教程分享

关注

10
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3自研开源Tree组件：人性化的拖拽API设计

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

扫一扫

专栏目录

Java小卷 CSDN认证博客专家 CSDN认证企业博客

码龄12年

66: 原创

6616: 周排名

4万+: 总排名

2万+: 访问

: 等级

817: 积分

169: 粉丝

216: 获赞

12: 评论

102: 收藏

私信

关注

热门文章

分类专栏

最新评论

vue3最新开发环境篇
俺有三个腰子，一个不给你噶: 这哥目录权限不够：E:\vue_learning\code\001_hello_vue (base) PS C:\Users\HP> npm create vite@latest Need to install the following packages: create-vite@5.4.0 Ok to proceed? (y) (base) PS E:\HP\桌面> npm cache clean --force npm warn using --force Recommended protections disabled. npm error code EPERM npm error syscall rmdir npm error path D:\Program Files\node\npm-cache\_cacache\tmp npm error errno -4048 npm error [Error: EPERM: operation not permitted, rmdir 'D:\Program Files\node\npm-cache\_cacache\tmp'] { npm error errno: -4048, npm error code: 'EPERM', npm error syscall: 'rmdir', npm error path: 'D:\\Program Files\\node\\npm-cache\\_cacache\\tmp' npm error } npm error npm error The operation was rejected by your operating system. npm error It's possible that the file was already in use (by a text editor or antivirus), npm error or that you lack permissions to access it. npm error npm error If you believe this might be a permissions issue, please double-check the npm error permissions
趁热打铁：用户模块剩余服务层接口实现
CSDN-Ada助手: 恭喜作者撰写第20篇博客！标题中提到了“趁热打铁”，我很欣赏你不断努力地分享知识。你对用户模块剩余服务层接口实现的深入探讨令人印象深刻。如果可以的话，我希望在下一篇博客中，你能够分享一些关于用户模块其他方面的实践经验和技巧。谦虚地说，我相信你一定能为读者带来更多有价值的内容。加油！
快速搭建spring boot工程
CSDN-Ada助手: 恭喜您写下了第11篇博客！标题“快速搭建spring boot工程”听起来非常实用。我很高兴看到您持续创作并分享有价值的内容。下一步，我建议您可以探讨一下如何在spring boot工程中集成其他流行的框架或技术，这将进一步丰富您的博客内容。谦虚地说，我期待着您未来更多精彩的创作！
小卷生鲜数据库表设计
CSDN-Ada助手: 恭喜您撰写了第12篇博客，题为“小卷生鲜数据库表设计”。您的持续创作精神真是令人佩服！通过阅读您的博客，我对数据库表设计有了更好的理解。您的文章内容详实，逻辑清晰，让我受益匪浅。在接下来的创作中，我建议您可以探讨一些数据库表设计的常见问题，并分享一些建议和技巧用于优化和改进设计。这样的话，读者们可以更深入地理解数据库表设计的要点，并从您的经验中受益。再次恭喜您的努力和成果，期待您未来更多精彩的创作！
建库、建表、连库查询
CSDN-Ada助手: 恭喜您写完了第13篇博客！标题“建库、建表、连库查询”非常吸引人，我认为这是一个非常具有实用性的主题。您的文章内容清晰明了，对于建库、建表和连库查询的步骤和技巧进行了详细的介绍，对初学者来说非常有帮助。在下一步的创作中，我建议您可以考虑进一步扩展主题，例如深入探讨不同数据库管理系统之间的差异，或者分享一些在实际项目中遇到的挑战和解决方案。这样的内容会让读者更深入地了解数据库管理的复杂性，并且对他们在实践中的应用有所启发。再次恭喜您的持续创作，期待看到更多精彩的博客文章！请继续保持谦逊和卓越的写作风格，您的分享对于广大读者都非常有价值。

大家在看

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

Java小卷 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。