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

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

文章目录

使用示例

组件的使用很简单:

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

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

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

allowDrag

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

allowDrop

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

支持节点勾选

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

支持dirty检测

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

后台API交互

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

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

源码实现

见后续会员教程分享

相关推荐
Sheldon一蓑烟雨任平生2 天前
Vite 深度剖析(四)
性能优化·vite·图片压缩·gzip压缩·代码压缩·摇树·dns-prefetch
Sheldon一蓑烟雨任平生2 天前
Vite 深度剖析(二)
vite·静态资源处理·hmr·css工程化处理·模块热替换·vite 插件
Sheldon一蓑烟雨任平生2 天前
Vite 深度剖析(一)
vue·react·vite·环境变量·esbuild·vite.config.ts·依赖预构建
赵庆明老师4 天前
vben开发入门6:tsconfig.json
json·vue3·vben
赵庆明老师4 天前
vben开发入门5:vite.config.ts
前端·html·vue3·vben
walking9574 天前
Vite 打包优化终极指南:从 30MB 到 800KB 的性能飞跃
前端·vue.js·vite
whyfail5 天前
CVE-2026-39363-Vite开发服务器安全漏洞深度分析
安全·vite
江上清风山间明月5 天前
Vite现代化的前端构建工具详解
前端·webpack·nodejs·vite
沙振宇5 天前
【Web】使用Vue3+PlayCanvas开发3D游戏(十二)渲染PCD点云可视化模型
3d·vue3·点云·pcd
发现一只大呆瓜8 天前
深入浅出 Tree Shaking:Rollup 是如何“摇”掉死代码的?
前端·性能优化·vite