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

源码实现

见后续会员教程分享

相关推荐
Beginner x_u1 小时前
Vue3 + TS + TailwindCSS 操作引导组件开发逐行解析
typescript·vue3·前端开发·tailwindcss·组件开发
凯小默2 小时前
17-使用前置导航守卫判断用户登录后刷新情况
vue3
凯小默4 小时前
18-通过actions方法封装请求以及补充计算属性
vue3
凯小默2 天前
13-实现首页的基础结构
vue3
我叫张小白。2 天前
Vue3 插槽:组件内容分发的灵活机制
前端·javascript·vue.js·前端框架·vue3
是席木木啊2 天前
Vue3 + Axios 适配多节点后端服务:最小侵入式解决方案
vue3·axios·前端开发·技术方案设计
宁波阿成2 天前
基于Jeecgboot3.9.0的vue3版本前后端分离的flowable流程管理平台
vue3·springboot3·flowable·jeecgboot
临江仙4553 天前
Vite 性能优化实战:从 0 到 1 打造极速开发体验(附完整配置)
vue.js·vite
盛夏绽放3 天前
新手入门:实现聚焦式主题切换动效(Vue3 + Pinia + View Transitions)
前端·vue3·pinia·聚焦式主题切换
jason_renyu3 天前
Vite 与 Webpack:核心区别、优缺点、面试题及选型趋势
webpack·vite·模块联邦·webpack和vite区别