Vue3+TSX手撸Element Tree升级版(vue3.1)
ztj100 2025-01-31 16:22 15 浏览 0 评论
Vue3开源的Tree组件有很多,大家常用的是以Element Tree为首的UI组件。就我个人体验来说,有些地方做的并不好,尤其是树节点的增删改操作、勾选功能以及高级的拖拽实现。这些功能不能很好的整合在一起,与后台交互的可扩展性也比较差。翻开element plus tree的源码,你会发现有很多的设计思路比较受限,实现的很繁琐。毕竟vue3给我们提供非常便利的Composition API,组件各部分功能的开发可以更好的进行模块化、数据响应式编程以及功能整合。 个人在尝试手撸Tree组件时,有深刻的体会,利用vue3提供的特性加上一些突破性的设计,在很好仿element tree实现各项功能的同时,代码量可以缩减到1/3。因此,个人觉得很有必要把自己的学习心得跟大家分享下。 Tree组件还在迭代开发中,本地保留了渐进式开发的练习代码:
添加图片注释,不超过 140 字(可选)
这种练习方式便于我回头整理和总结是如何从0实现一个较为完整的Tree组件的。如果大家关注和反馈比较热烈的话,打算出一套视频教程手把手演示如何一步步实现的。 软件
- Node 18.18.2
- NPM 9.8.1
- VSCode 适合专业的前端
- IntelliJ Idea 更适合以Java为后端的全栈开发人员,考虑到后续要开发后台做UI组件的交互,这里选该工具
技术栈
- Vite 5.2.0
- Vue 3.4.21
- Typescript 5.4.5
- Eslint 8.57.0
- Prettier 3.2.5
- TailWindcss 3.4.3
- Sass 1.75.0
- ...
这套基本的技术栈个人觉得最适合Vue3组件库的研发,同时组件的编写形式也将由传统的.vue单文件结构,切换到tsx的模板与脚本混合的自由模式。后续还会引入VitePress来实现组件示例的文档可视化。 项目结构
添加图片注释,不超过 140 字(可选)
迭代复盘
工程整合阶段
快速搭建Vite脚手架
安装全局工具:npm i -g vite。快速初始化一个整合好ts的vue3工程,使用命令npm init vite,后续用交互式命令执行选项来创建。运行一个小而美的应用:
添加图片注释,不超过 140 字(可选)
回归最简配置
忘掉一切招式,一切从头开始,进行最简化配置,在这个基础上一点点叠加。编写一个最简单的.vue单文件的HelloWorld组件并应用一下:
添加图片注释,不超过 140 字(可选)
集成jsx vite和jsx的集成非常简单,只要装一个插件并在vite.config.js中配置下即可。然后把组件的.vue文件改造成.jsx来实现,jsx的模板写法有点像早年Java后端jsp中混杂java脚本,模板渲染的写法更自由。练习:将前面的组件改写成jsx的实现方式,要求功能保持不变。 集成ts 在前一节基础上,完成vite和ts的整合。
- 加ts依赖以及和vue整合的tsc编译器依赖
- tsconfig相关的配置文件
- 改写js和jsx文件
- vite的dev启动服务中增加tsc的编译命令 注意以下问题的修复:
添加图片注释,不超过 140 字(可选)
练习:试着将HelloWorld组件中字符串的msg改为一个包含info字符串的IMsg接口类型,并改造前面的示例
集成eslint和prettier
涉及的整合步骤列了一个大纲,可以照着去做
添加图片注释,不超过 140 字(可选)
踩坑:vite-plugin-eslint插件配置的ts编译问题
集成tailwindcss
方便组件样式的应用,大部分情况不用自己手写样式,复用tailwindcss的样式,提高开发和工程构建效率:
添加图片注释,不超过 140 字(可选)
练一练:试着为HelloWorld组件中的msg标题应用下tailwindcss样式
添加图片注释,不超过 140 字(可选)
Tree组件基础开发
扁平结构的处理和树渲染
本节目标:实现一个扁平结构的列表数据下Tree的页面渲染:
添加图片注释,不超过 140 字(可选)
难点:如何将原始嵌套结构的数据拍平为扁平化的数据
收益:
- 数组reduce方法在递归处理中的应用。
- tsx中v-for的写法,注意key的绑定
树节点的展开与折叠交互
实现效果:
添加图片注释,不超过 140 字(可选)
开发要点:
- 节点类型的定义与扩展
- 扁平化函数改造:原始节点类型转扁平化节点类型
- 扁平化数据列表的动态渲染
- 使用ref和computed实现可见列表的响应式渲染
- 通过onClick交互事件改变节点的expanded属性来触发视图的更新,注意是局部更新
难点:
- 可见列表过滤的思路
- 如何确定一个扁平化节点下有多少个后代子元素,有没有更好的办法
计算属性在树结构中的妙用 该部分是本套教程的重点章节之一,也是后续Tree组件高级功能实现的基础。不使用计算属性,程序功能实现会变得越来越困难,且执行性能越来越低。 计算节点索引和后代节点长度 Tree很多功能实现需要定位当前索引的位置以及子节点,如果每次都手动遍历整个扁平数据列表,不但low而且性能不高。本节教你怎么在ts中实现响应式的数据计算属性。用了计算属性,它会缓存计算结果,当关注的数据发生变化才会重新计算,执行效率也提高了。 实现效果:
添加图片注释,不超过 140 字(可选)
这里显示了扁平化数据列表每个节点的索引,当节点个数发生改变,位置受影响的节点会重新计算(后续新增删除节点时会演示)。同时在控制台看到,子节点长度计算属性第一次触发后会缓存结果,数据没变化时不会重新计算。 思路和实现:略 实现参照线 在上一节基础上,继续扩展结构化节点计算属性,实现参照线长度计算属性,以便随着节点的展开折叠动态生成参照线的高度,看效果:
添加图片注释,不超过 140 字(可选)
绿色数字动态展示了父节点参照线的长度。 节点和参照线过渡动画 本节会对之前实现的生硬的折叠和展开效果增加动画修饰,会综合运用Vue对于节点渲染所支持的动画特性,包括:
- <TransitionGroup>、<Transition>过渡动画标签的使用
- 编写scss文件实现过渡动画样式控制
- 应用onBeforeEnter、onEnter以及onLeave的动画钩子加dom样式操作,更精准的控制vue内层元素渲染的动画效果
实现难度在于,线的高度是动态计算出来的,且线的元素位于循环渲染的节点元素的内部,需要手动处理vue过渡动画失效的情况。 实现效果,过渡动画时间调大,方便看效果:
添加图片注释,不超过 140 字(可选)
svg图标组件的封装与使用
算是复习下.vue单文件组件的开发,整合iconfont的免费素材库js文件,通过自定义组件标签的形式来使用各个svg小图标。
我们用svg小图标替换掉原先<button>标签的+、-符号,看效果:
添加图片注释,不超过 140 字(可选)
Tree高级功能实现
自定义节点图标和操作插槽
本节介绍如何快速实现tsx中的slots,看效果:
添加图片注释,不超过 140 字(可选)
tsx的App组件中使用tree组件时指定插槽的方式:
return () => {
const flatTree = generateFlatTree(treeData)
return (
<div class='m-4'>
<FxTree data={flatTree}>
{{
icon: (node: IFlatTreeNode) => (
<span class='mr-1'>
{/*{!node.isLeaf ? (*/}
{/* <svg-icon icon='folder-fill' class={'inline-block h-[18px] w-[20px] fill-orange-500'} />*/}
{/*) : (*/}
{/* <svg-icon icon='folder-fill' class={'inline-block h-[18px] w-[20px] fill-gray-400'} />*/}
{/*)}*/}
<svg-icon icon='folder-fill' class={`inline-block h-[18px] w-[20px] ${!node.isLeaf ? 'fill-orange-500' : 'fill-gray-400'} `} />
</span>
),
operation: () => (
<div>
<svg-icon icon='add' class={'inline-block h-[20px] w-[20px] cursor-pointer fill-pink-500'} />
<svg-icon icon='edit' class={'ml-4 inline-block h-[20px] w-[20px] cursor-pointer fill-green-500'} />
<svg-icon icon='delete' class={'ml-4 inline-block h-[20px] w-[20px] cursor-pointer fill-slate-500'} />
</div>
)
}}
</FxTree>
</div>
)
}
扁平化tree的前端分页
在数据量很大的情况下,前端tree的渲染会变慢,可以采用懒加载或者咱独创的扁平化分页的形式来提高访问效率。这种前端分页咱们甚至可以支持跨页勾选:
添加图片注释,不超过 140 字(可选)
Tree的使用方式:
添加图片注释,不超过 140 字(可选)
新增子节点
目前只实现了在父节点下新增子节点,新增一级节点其实更简单,后续会完善,包括与后台的数据交互,目前主要实现前端用户交互功能。
新增效果:
添加图片注释,不超过 140 字(可选)
很显然,因为前面我们用计算属性对节点基础功能做了很好的铺垫,实现新增节点变得非常简单。看到新增节点后,受影响的节点的索引和参照线长度都会重新计算。
组件的使用:
添加图片注释,不超过 140 字(可选)
删除节点
移除节点也非常简单,不需要对树进行遍历,使用前面实现的节点索引和长度的计算属性即可,在原始结构和扁平结构中删除并重新绑定后续节点的前置节点即可。效果:
添加图片注释,不超过 140 字(可选)
使用方式,后续需要优化,在用户api重构章节教大家如何优化哈:
添加图片注释,不超过 140 字(可选)
节点重命名
添加图片注释,不超过 140 字(可选)
新增的节点可以立即开启编辑,该功能是组件内置的,使用组件时可这样开启:
添加图片注释,不超过 140 字(可选)
节点勾选
节点勾选的功能可以很好和新增删除节点结合,这点超越了element tree,看效果:
添加图片注释,不超过 140 字(可选)
还支持在启用前端分页时的跨页勾选:
添加图片注释,不超过 140 字(可选)
节点数据懒加载
该功能会与后台接口交互,这里我们约定接口属性有一个noData字段如果是true则是叶子数据节点,不会触发懒加载。懒加载一次后,再展开则不会再加载数据;同时该功能可以很好的和节点的新增、编辑、删除以及节点勾选功能很好的工作。效果如下:
添加图片注释,不超过 140 字(可选)
节点拖拽
该功能目前开发了一半,因为有了前面基础功能的铺垫,实现拖拽会非常简单,这比element plus tree的实现代码将近少了1/3。具体细节,咱们会在后续系列教程中教大家怎么实现。先看半成品效果:
添加图片注释,不超过 140 字(可选)
咱们实现的效果,对比element tree,发现拖拽过程中光标也不会闪来闪去,用户体验很棒,剩下还要实现拖放后的节点更新操作。效果会后续更新。。。 总结 关于前端组件自己造轮子的教程,能比较完整的把各部分实现的细节都以逐步迭代的形式连载下来的不是很多。包括一些视频教程,所谓的前端技术专家教你手写vue组件,虎头蛇尾的情况会比较多,这类教程入个门就行,学会怎么搭建环境、整合工具、组件开发流程,语言基础的东西自己补补,剩下就是设计实现思路、api特性的灵活运用。最后这部分是该类教程成功的关键。掘金前端大佬前端杨村长这方面的教程给我的启发很大,用大佬自己的话来说,教会我的东西,算是“抛砖引玉”。实际我学到的东西,不光是语法、框架特性,更多是设计上的思考,如怎么把树的递归渲染做成简单的列表渲染,怎么用计算属性来代替人工的节点遍历,Vue Composition API对复杂组件开发的代码重构带来哪些优势,等等。。。最后,我想说的是,造轮子这件事,不用参考现成UI的源码实现,毕竟开源源码都是众多大佬业余精力奉献出来的,设计思路上会有很多可以优化的部分,主要还是奔着用户的使用和期待,以实现功能为主。咱更多应该站在产品和API用户的角度,再结合知识储备,让设计和实现能结合Vue新特性,简化开发任务,提高效率和代码质量。大家加油!!
相关推荐
- Sublime Text 4 稳定版 Build 4113 发布
-
IT之家7月18日消息知名编辑器SublimeText4近日发布了Build4113版本,是SublimeText4的第二个稳定版。IT之家了解到,SublimeTe...
- 【小白课程】openKylin便签贴的设计与实现
-
openKylin便签贴作为侧边栏的一个小插件,提供便捷的文本记录和灵活的页面展示。openKylin便签贴分为两个部分:便签列表...
- 壹啦罐罐 Android 手机里的 Xposed 都装了啥
-
这是少数派推出的系列专题,叫做「我的手机里都装了啥」。这个系列将邀请到不同的玩家,从他们各自的角度介绍手机中最爱的或是日常使用最频繁的App。文章将以「每周一篇」的频率更新,内容范围会包括iOS、...
- 电气自动化专业词汇中英文对照表(电气自动化专业英语单词)
-
专业词汇中英文对照表...
- Python界面设计Tkinter模块的核心组件
-
我们使用一个模块,我们要熟悉这个模块的主要元件。如我们设计一个窗口,我们可以用Tk()来完成创建;一些交互元素,按钮、标签、编辑框用到控件;怎么去布局你的界面,我们可以用到pack()、grid()...
- 以色列发现“死海古卷”新残片(死海古卷是真的吗)
-
编译|陈家琦据艺术新闻网(artnews.com)报道,3月16日,以色列考古学家发现了死海古卷(DeadSeaScrolls)新残片。新出土的羊皮纸残片中包括以希腊文书写的《十二先知书》段落,这...
- 鸿蒙Next仓颉语言开发实战教程:订单列表
-
大家上午好,最近不断有友友反馈仓颉语言和ArkTs很像,所以要注意不要混淆。今天要分享的是仓颉语言开发商城应用的订单列表页。首先来分析一下这个页面,它分为三大部分,分别是导航栏、订单类型和订单列表部分...
- 哪些模块可以用在 Xposed for Lollipop 上?Xposed 模块兼容性解答
-
虽然已经有了XposedforLollipop的安装教程,但由于其还处在alpha阶段,一些Xposed模块能不能依赖其正常工作还未可知。为了解决大家对于模块兼容性的疑惑,笔者尽可能多...
- 利用 Fluid 自制 Mac 版 Overcast 应用
-
我喜爱收听播客,健身、上/下班途中,工作中,甚至是忙着做家务时。大多数情况下我会用MarcoArment开发的Overcast(Freemium)在iPhone上收听,这是我目前最喜爱的Po...
- 浅色Al云食堂APP代码(三)(手机云食堂)
-
以下是进一步优化完善后的浅色AI云食堂APP完整代码,新增了数据可视化、用户反馈、智能推荐等功能,并优化了代码结构和性能。项目结构...
- 实战PyQt5: 121-使用QImage实现一个看图应用
-
QImage简介QImage类提供了独立于硬件的图像表示形式,该图像表示形式可以直接访问像素数据,并且可以用作绘制设备。QImage是QPaintDevice子类,因此可以使用QPainter直接在图...
- 滚动条隐藏及美化(滚动条隐藏但是可以滚动)
-
1、滚动条隐藏背景/场景:在移动端,滑动的时候,会显示默认滚动条,如图1://隐藏代码:/*隐藏滚轮*/.ul-scrool-box::-webkit-scrollbar,.ul-scrool...
- 浅色AI云食堂APP完整代码(二)(ai 食堂)
-
以下是整合后的浅色AI云食堂APP完整代码,包含后端核心功能、前端界面以及优化增强功能。项目采用Django框架开发,支持库存管理、订单处理、财务管理等核心功能,并包含库存预警、数据导出、权限管理等增...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)