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

源码实现

见后续会员教程分享

相关推荐
weixin79893765432...1 天前
Electron + Vue 3 + Vite 实践
vue.js·electron·vite
AAA阿giao3 天前
使用 Vite + Vue 3 搭建项目并配置路由的全流程(含国内镜像加速)
vue.js·node.js·vite
笨笨狗吞噬者3 天前
【uniapp】小程序实现自由控制组件JSON文件配置
vue.js·微信小程序·vite
特级业务专家5 天前
续集:Vite 字体插件重构之路 —— 从“能用”到“生产级稳定”
javascript·vue.js·vite
特级业务专家7 天前
把 16MB 中文字体压到 400KB:我写了一个 Vite 字体子集插件
javascript·vue.js·vite
你说啥名字好呢7 天前
【Vue 渲染流程揭秘】
前端·javascript·vue.js·vue3·源码分析
行走的陀螺仪10 天前
vue3-封装权限按钮组件和自定义指令
前端·vue3·js·自定义指令·权限按钮
isyuah10 天前
vite-plugin-openapi-ts CLI 使用指南
前端·vite
麦麦大数据10 天前
F046 新闻推荐可视化大数据系统vue3+flask+neo4j
python·flask·vue3·知识图谱·neo4j·推荐算法
Sheldon一蓑烟雨任平生10 天前
Vue3 高级性能优化
性能优化·vue3·tree-shaking·高级性能优化·首屏加载优化·更新优化·大型虚拟列表