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

源码实现

见后续会员教程分享

相关推荐
gis开发之家3 天前
《Vue3 从入门到大神40篇》Vue3 源码详解(十):diff 算法全解析 —— 为什么 Vue3 比 Vue2 更快?
javascript·算法·typescript·前端框架·vue3·vue3源码
PedroQue993 天前
Vite插件v1.1.0发布:自动导入全面重构
前端·vite
YFF菲菲兔4 天前
Environment API 总述
vite
至乐活着4 天前
Vite 构建工具原理解析与实战:从 ES Module 到极速 HMR
vite·热更新·构建工具·前端工程化·es module
linsk19984 天前
React18、19如何兼容 IE9、IE10
react·rollup·vite·兼容·ie
想你依然心痛5 天前
让数据会说话,Vue 结合 ECharts 打造电力可视化大屏
echarts·vue3·数据大屏·电力可视化
路光.6 天前
Vue2升级Vue3处理原 UMD/CommonJS 打包文件,不是标准 ESM
前端·javascript·vue.js·vue3
gis开发之家7 天前
《Vue3 从入门到大神37篇》Vue3 源码详解(七):watch 与 watchEffect 源码对比——副作用是如何被追踪的?
javascript·前端框架·vue3·vue3源码
夕夕木各8 天前
从第一个 PR 到 Vite 官方中文文档维护者
github·vite
布兰妮甜9 天前
从 0 搭建企业级 Vue3/Vite 脚手架(规范、eslint、husky、打包、环境变量全流程)
typescript·vue3·vite·脚手架·前端工程化