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

源码实现

见后续会员教程分享

相关推荐
无法长大2 小时前
Mac M1 环境下使用 Rust Tauri 将 Vue3 项目打包成 APK 完整指南
android·前端·macos·rust·vue3·tauri·打包apk
xiaoxue..3 小时前
全栈项目 学习日记 (第一章)
前端·react.js·面试·vite
淡笑沐白1 天前
Vue3使用ElementPlus实现菜单的无限递归
javascript·vue3·elementplus
Sapphire~1 天前
Vue3-18 生命周期(vue2+vue3)
vue3
Sapphire~2 天前
Vue3-17 父子组件使用props传值
vue3
小圣贤君3 天前
在 Electron 应用中优雅接入 DeepSeek AI:从零到一的完整实践指南
人工智能·electron·vue3·ai写作·deepseek
Sapphire~4 天前
Vue3-14 watch监视对象及对象属性,watchEffect
vue3
技术宅星云4 天前
7. vue3-element-admin 二次开发图文教程
vue3·element-admin·后端开箱即用前端框架
Sheldon一蓑烟雨任平生5 天前
Sass 星空(Sass + keyframes 实现星空动画)
前端·css·vue3·sass·keyframes
Irene19916 天前
Vue 3 中移除了 $on、$off 和 $once 方法(附:Composables 组合式函数 使用详解)
vue3