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()才更新拖拽后的节点,非常的人性化!

源码实现

见后续会员教程分享

相关推荐
曲幽17 小时前
我用了FastApiAdmin后,连夜把踩过的坑都整理出来了
redis·python·postgresql·vue3·fastapi·web·sqlalchemy·admin·fastapiadmin
__zRainy__1 天前
uni-app 全局容器实战系列(一):全局容器的实现
uni-app·vite
Liu.7741 天前
vue3bug收录
vue3
发现一只大呆瓜2 天前
Vite凭什么这么快?3分钟带你彻底搞懂 Vite 热更新的幕后黑手
前端·面试·vite
Hello--_--World2 天前
利用CDN进行首屏优化。能不能看CDN与本地服务器谁快用谁?
运维·服务器·前端·javascript·vite
Hello--_--World2 天前
为什么 用vite进行分包后,可以通过 浏览器强制缓存 提高性能?路由懒加载进行的分包与 vite进行的分包有什么不同?
前端·javascript·缓存·vite
Patrick_Wilson4 天前
Vite+ vs nvm:一次「全局 CLI 失踪」事故引出的 Node 工具链选型
node.js·vite·前端工程化
真夜4 天前
开发正常但生产异常的 Bug:Vite manualChunks 循环依赖导致 ReferenceError
前端·前端框架·vite
豹哥学前端5 天前
前端工程化实战:从包管理到 Vite 配置,一套下来全明白
前端·javascript·vite
天渺工作室7 天前
构建完自动打包压缩,一个插件搞定 Vite / Webpack / Rollup / ESBuild
webpack·vite·rollup.js