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

源码实现

见后续会员教程分享

相关推荐
Sapphire~17 小时前
Vue3-10 ref与reactive创建响应式数据的区别
vue3
Irene19911 天前
Vue3 TypeScript 项目中,Emits 验证的使用场景
typescript·vue3·验证
箫笙默1 天前
Vue3基础笔记
笔记·vue·vue3
Sapphire~2 天前
Vue3-09 创建响应式数据(基本类型ref和对象类型reactive)
vue3
Sapphire~2 天前
Vue3-02 脚手架创建项目及文件解释作用
vue3
Cherry的跨界思维3 天前
28、AI测试环境搭建与全栈工具实战:从本地到云平台的完整指南
java·人工智能·vue3·ai测试·ai全栈·测试全栈·ai测试全栈
Cherry的跨界思维4 天前
【AI测试全栈:Vue核心】22、从零到一:Vue3+ECharts构建企业级AI测试可视化仪表盘项目实战
vue.js·人工智能·echarts·vue3·ai全栈·测试全栈·ai测试全栈
前端小L5 天前
专题三:完善响应式 —— readonly 与 isReactive
源码·vue3
神色自若5 天前
vue3 带tabs的后台管理系统,切换tab标签后,共用界面带参数缓存界面状态
前端·vue3
前端小L6 天前
专题一:搭建测试驱动环境 (TypeScript + Vitest)
前端·javascript·typescript·源码·vue3