当前位置： 首页 > news >正文

Vue3自研开源Tree组件：人性化的拖拽API设计

news 来源：原创 2024/9/22 1:39:48

针对Element Plus Tree组件拖拽功能API用的麻烦，小卷开发了一个API使用简单的JuanTree组件。拖拽功能用起来非常简单！

文章目录

    • 使用示例
      • allowDrag
      • allowDrop
      • 支持节点勾选
      • 支持dirty检测
      • 后台API交互
    • 源码实现

使用示例

组件的使用很简单：

在这里插入图片描述

通过ref引用tree组件，可操作其expose出来的方法，比如，保存节点操作（新增、删除和重命名节点）的变更、新增一级节点：

在这里插入图片描述

通过v-model绑定勾选项，data属性绑定初始化树形结构的嵌套数据，option-props用于绑定组件的选项：

在这里插入图片描述

allowDrop方法，用来让用户控制哪些节点不允许drop操作；当然哪些节点不允许drag也可以由相应的方法来控制，比如下面的逻辑控制：

在这里插入图片描述

allowDrag

比如44这个节点无法拖动：

在这里插入图片描述

allowDrop

演示拖拽drop的限制，Java Web节点不能释放在a11或a22节点上，超过了5级限制。

在这里插入图片描述

支持节点勾选

在拖拽完成后，节点的勾选状态能保证一致性

在这里插入图片描述

支持dirty检测

在编辑节点的情况下，要先保存变更才能继续拖拽

在这里插入图片描述

后台API交互

提供了便捷的拖拽回调接口

在这里插入图片描述

这里给用户进行拖拽的后台API提供了必要的参数，如果参数不够可以后期再扩展，同时提供了回调的done函数，调用了done()才更新拖拽后的节点，非常的人性化！

在这里插入图片描述

源码实现

见后续会员教程分享

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 新手小白要如何自学黑客技术，看这篇就够了！
  • SpringBoot内置Tomcat启动原理
  • 装饰大师——装饰模式（Python实现）
  • UE5 UE4 使用python进行编辑器操作
  • 028-GeoGebra中级篇-脚本的初步的探索
  • python爬虫【3】—— 爬虫反反爬
  • 基于springboot的大学奖学金评定管理系统表结构调试讲解源码
  • 【vueUse库Utilities模块各函数简介及使用方法--第5篇】
  • C# timer.start()和timer1.Enabled=false；的区别
  • .Net Core中Quartz的使用方法
  • 2024年最强网络安全学习路线，详细到直接上清华的教材！
  • 正则采集器之二——后台搭建
  • 前后端分离开发遵循接口规范-YAPI
  • 如何使用 Puppeteer 绕过 Akamai
  • Java导出Excel给每一列设置不同样式示例
  • 4. 路由到控制器 - Laravel从零开始教程
  • canvas 绘制双线技巧
  • Docker容器管理
  • exif信息对照
  • mongodb--安装和初步使用教程
  • Nacos系列：Nacos的Java SDK使用
  • Python进阶细节
  • Python爬虫--- 1.3 BS4库的解析器
  • Solarized Scheme
  • spark本地环境的搭建到运行第一个spark程序
  • 初识MongoDB分片
  • 翻译 | 老司机带你秒懂内存管理 - 第一部（共三部）
  • 给第三方使用接口的 URL 签名实现
  • 基于Dubbo+ZooKeeper的分布式服务的实现
  • 技术：超级实用的电脑小技巧
  • 开年巨制！千人千面回放技术让你“看到”Flutter用户侧问题
  • 理清楚Vue的结构
  • 每天10道Java面试题，跟我走，offer有！
  • 前端存储 - localStorage
  • 我的业余项目总结
  • 小程序button引导用户授权
  • 一个JAVA程序员成长之路分享
  • postgresql行列转换函数
  • ​学习笔记——动态路由——IS-IS中间系统到中间系统（报文/TLV）​
  • # Java NIO（一）FileChannel
  • # 详解 JS 中的事件循环、宏/微任务、Primise对象、定时器函数，以及其在工作中的应用和注意事项
  • #常见电池型号介绍 常见电池尺寸是多少【详解】
  • （2022版）一套教程搞定k8s安装到实战 | RBAC
  • （C#）if (this == null)？你在逗我，this 怎么可能为 null！用 IL 编译和反编译看穿一切
  • （solr系列:一）使用tomcat部署solr服务
  • (二)原生js案例之数码时钟计时
  • （附源码）springboot优课在线教学系统 毕业设计 081251
  • （附源码）基于SpringBoot和Vue的厨到家服务平台的设计与实现 毕业设计 063133
  • (附源码)计算机毕业设计ssm高校《大学语文》课程作业在线管理系统
  • (附源码)计算机毕业设计高校学生选课系统
  • (紀錄)[ASP.NET MVC][jQuery]-2 純手工打造屬於自己的 jQuery GridView (含完整程式碼下載)...
  • （七）Knockout 创建自定义绑定
  • (十六)、把镜像推送到私有化 Docker 仓库
  • （算法二）滑动窗口
  • （五）activiti-modeler 编辑器初步优化