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

源码实现

见后续会员教程分享

相关推荐
Java陈序员17 小时前
太香了!一款轻量级的 Elasticsearch 可视化管理工具!
vue.js·elasticsearch·vite
之歆1 天前
Vue3 + Vite2.0 全栈开发实践:从零到一构建通用后台管理系统-上
vue3·vite2.0
之歆1 天前
Vue3 + Vite2.0 全栈开发实践:从零到一构建通用后台管理系统-下
javascript·vue.js·vue3
天蓝色的鱼鱼2 天前
Vite 8:从“混动”到“纯电”,构建性能提升10倍+
前端·vite
麦麦大数据3 天前
M004_基于Langchain+RAG的银行智能客服系统设计与开发
typescript·langchain·flask·vue3·faiss·rag
哆啦A梦15885 天前
Vue3魔法手册 作者 张天禹 012_路由_(一)
前端·typescript·vue3
Roc.Chang6 天前
Vite 启动报错:listen EACCES: permission denied 0.0.0.0:80 解决方案
linux·前端·vue·vite
麦麦大数据7 天前
M003_中药可视化系统开发实践:知识图谱与AI智能问答的完美结合
人工智能·flask·llm·vue3·知识图谱·neo4j·ner
哆啦A梦15887 天前
Vue3魔法手册 作者 张天禹 015_插槽
前端·vue.js·typescript·vue3
沛沛老爹12 天前
Vue3+TS实战:基于策略模式的前端动态脱敏UI组件设计与实现
前端·ui·vue3·数据安全·策略模式·动态渲染·前端脱敏