![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue3开源组件实战
文章平均质量分 54
以组件实战为驱动,综合vue3的各种新特性进行全方面的实践~
Java小卷
这个作者很懒,什么都没留下…
展开
-
视频教程:自研低代码拖拽图形编辑器底层库moveable示例学习
视频地址:自研低代码拖拽图形编辑器底层库moveable示例学习原创 2024-08-17 21:22:21 · 326 阅读 · 0 评论 -
Tmagic-editor低代码底层拖拽库Moveable示例学习
在前面咱们的中分享了自己开发的基本拖拽组件,也只是做了最简单的基本实现。真要写产品,更多还是依赖相关的开源优秀库。原创 2024-08-16 18:01:54 · 617 阅读 · 0 评论 -
自研低代码海报制作平台学习分享计划
vue3组件库开发前面咱卷完了JuanTree组件,接下来一起来卷vue3低代码海报制作平台的基础组件实现。首先是拖拽基础组件的开发,整好把前面学习的知识点再运用进来。原创 2024-08-15 07:34:33 · 559 阅读 · 0 评论 -
视频教程:vue3自定义指令重构拖拽组件源码
视频教程:vue3自定义指令重构拖拽组件源码原创 2024-08-14 07:19:40 · 361 阅读 · 0 评论 -
自研Vue3低代码海报制作平台第一步:基础拖拽组件开发
前面我们学习了很多vue3的知识,是时候把它们用起来做一个有意思的平台:低代码海报制作平台了。首先我们要实现基础的拖拽功能,这里非常感谢掘金优秀创作者 - 幽月之格大佬,拜读您的《可拖拽、缩放、旋转组件》技术专栏让我跟着一步步的敲代码,站在大佬的肩膀上,参考下技术大牛是怎么实现的。学习别人的设计思想,当然代码也不是完全照搬原创 2024-08-12 16:32:40 · 702 阅读 · 0 评论 -
视频教程:Vue3移动端抽屉弹层组件实战
本教程演示了vue3的composition api实现的移动端h5抽屉弹层组件,录屏讲解包含了功能演示和具体的源码实现。原创 2024-08-11 19:44:25 · 502 阅读 · 0 评论 -
Vue3.4双向绑定新特性:defineModel好用爱用
vue3中传统的v-model的定义方式是声明modelValue属性,然后在事件发布时发送update:modelValue来实现v-model更新。笔者在使用jsx模板来开发组件时,发现了其弊端。值得欣喜的是,从vue 3.4开始引入了一个实现v-model的新特性defineModel的composition api。下面是相关实践。原创 2024-08-11 10:14:30 · 586 阅读 · 0 评论 -
使用tailwindcss轻松实现移动端rem适配
本示例节选自小卷全栈开发实战系列的《Vue3实战》,将演示如何用所支持的rem体系轻松实现一个仿b站移动端头部导航栏rem适配。原创 2024-08-10 21:02:05 · 599 阅读 · 0 评论 -
视频教程 - 自研Vue3 Tree组件高级功能:虚拟滚动新增节点实现自动滚动
感谢小伙伴们对本套自研vue3 tree组件教程的关注,在前一篇《媲美Element Plus JuanTree终极实战:虚拟滚动》的功能演示中发现了小bug,特地整理了相关录屏来说明怎么一步步解决bug的,来回馈小伙伴们的支持。原创 2024-08-03 22:59:35 · 263 阅读 · 0 评论 -
媲美Element Plus JuanTree终极实战:虚拟滚动
JuanTree组件功能迭代终于来到了终章——虚拟滚动实现。原创 2024-08-02 18:05:15 · 708 阅读 · 0 评论 -
vue大数据量列表渲染性能优化:虚拟滚动原理
前面咱完成了自定义JuanTree组件各种功能的实现。在数据量很大的情况下,我们讲了两种实现方式来提高渲染性能:前端分页和节点数据懒加载。关于扁平化结构Tree和嵌套结构Tree组件的渲染嵌套结构的Tree组件是一种递归渲染,性能上比起列表结构的v-for渲染比较一般。对于这种渲染方式,在数据量很大的情况下,只有通过懒加载可以提高渲染性能;而扁平化结构则有更多的选择,前端分页是一种方式,还有一种更好的选择,就是本节介绍的虚拟滚动。原创 2024-08-01 21:40:22 · 645 阅读 · 0 评论 -
vite tsx项目的element plus集成 - 按需引入踩坑
前面我们进行了开源组件的自研,很多组件可直接用现成的开源组件库,并不需要自己重复造轮子,为此我们讲如何在当前技术整合的项目中实现组件的按需引入,同时解决遇到的一些坑。原创 2024-07-30 18:16:35 · 517 阅读 · 0 评论 -
Vue3自研开源Tree组件 - Vitepress文档功能演示
基于自己学习的一点Vue3和ts的知识,写的一个企业级的开源Tree组件,给大伙儿演示下组件功能和API的使用,如果您喜欢,不妨点赞和关注下,后续会继续分享源码教程,感谢支持!原创 2024-07-30 08:25:32 · 399 阅读 · 0 评论 -
自研Vue3开源Tree组件:节点拖拽bug修复
bug原因:插入扁平化列表的位置判断错误~原创 2024-07-29 17:44:54 · 228 阅读 · 0 评论 -
Vue3自研开源Tree组件:人性化的拖拽API设计
针对Element Plus Tree组件拖拽功能API用的麻烦,小卷开发了一个API使用简单的JuanTree组件。拖拽功能用起来非常简单!原创 2024-07-29 17:10:00 · 532 阅读 · 0 评论 -
可媲美Element Plus Tree组件研发:节点拖拽(上)
为自研Tree组件实现节点拖拽功能,实现节点拖拽后的可插入位置识别,下一小节实现节点插入和更新。原创 2024-07-28 16:01:09 · 693 阅读 · 0 评论 -
Element Tree Plus版功能演示:数据懒加载
为了让企业级Tree开源组件胜任更多的使用场景,我们对JuanTree做了进一步功能迭代和API封装,使得可以轻松实现数据懒加载功能。我们的功能迭代会参照element plus tree的特性,力求API的用法更加简单且多个功能特性一起使用时能很好的工作,故妄称为【Element Tree的Plus版】。原创 2024-07-27 21:17:47 · 347 阅读 · 0 评论 -
Vue3开源Tree组件研发:节点勾选支持v-model
自研Tree组件有两个原因:1. 目前开源UI对Tree组件的用户API不太友好,2. 提升Vue3组件自研能力。目前已实现的功能见上面思维导图。想象Tree组件的一个使用场景:后台管理员通过Tree组件来完成用户角色授权,同时支持对权限进行新增和删除等操作。这里既涉及到Tree节点的勾选操作,又涉及到节点增删。我们的研发就是同时很好的支持多个功能一起使用的情况,不能有bug,即便用户往往只启用一种功能。原创 2024-07-27 17:58:20 · 266 阅读 · 0 评论 -
Vue3计算属性终极实战:可媲美Element Plus Tree组件研发之节点勾选
前面完成了JuanTree组件的节点编辑和保存功能后,我们把精力放到节点勾选功能实现上来。注意,对于组件的开发者来说,要充分考虑用户的使用场景,组件提供的多个特性同时启用时必须要工作良好。就拿Tree组件来说,用户完全可以在启用勾选的情况下,同时启用节点增删功能,此时增删不能影响到勾选的一致性。原创 2024-07-26 17:41:21 · 569 阅读 · 0 评论 -
可媲美Element Plus Tree组件研发之保存节点变更
咱们的JuanTree组件功能开发完基本的增删改操作,接下来就是保存操作了。为了方便组件的使用者,我们将内置dirtyData的封装,这样用户对接后台服务提交Tree数据的变更将变得非常简单。这种封装不但简化了组件用户的开发工作,而且提升了产品的用户体验,组件状态不用做任何的刷新,各种操作对用户都是无感知的噢~原创 2024-07-26 13:48:54 · 1067 阅读 · 0 评论 -
Vue3可媲美Element Plus Tree组件研发之重命名节点
在上一节基础上继续迭代JuanTree的功能,我们将实现节点重命名的功能,一起开始学习吧~原创 2024-07-26 07:40:57 · 452 阅读 · 0 评论 -
Vue3可媲美Element Plus Tree组件实战之移除节点
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法,个人觉得作为提供给用户API,应该遵循迪米特法则,把功能实现的细节封装在组件内部,而提供给用户最简单的操作方式,同时在此基础上支持用户的扩展。因此,在API使用的人性化方便,个人觉得element plus做的并不优秀。为此,我们自定义tree组件时对用户API可以设计的更人性化些。原创 2024-07-25 14:02:05 · 721 阅读 · 0 评论 -
Vue3可媲美Element Plus Tree组件开发之append节点
在前面的章节,我们完成了可媲美Element Plus Tree组件的基本开发。通过实现各种计算属性,tree数据状态变化引起的视图更新被计算属性所接管了,无需我们再手动做各种遍历、查找以及手动监听操作,这样后续开发高级功能变得易如反掌啦!!原创 2024-07-24 17:10:08 · 542 阅读 · 0 评论 -
Vue3扁平化Tree组件的前端分页实现
大家好,我是小卷。得益于JuanTree的扁平化设计,在数据量很大的情况下除了懒加载,使用前端分页也是一种解决渲染性能问题的可选方案。原创 2024-07-24 11:25:39 · 444 阅读 · 0 评论 -
vue3 tree组件slots特性实践
上一小节我们实现了组件来支持组件开发中用到字体图标的地方,并应用在了tree节点折叠、展开的图标上,本小节我们将其用到tree的插槽内容中,一起来学习基于Vue3 tsx的插槽用法吧~原创 2024-07-23 16:27:34 · 246 阅读 · 0 评论 -
Vue3 SvgIcon组件开发
在前面自定义tree组件继续功能迭代前,我们先开发一个通用的ScgIcon组件,用于后续组件模板中小图标的展示。原创 2024-07-23 11:11:14 · 291 阅读 · 0 评论 -
扁平化Tree组件Vue3过渡动画
本小节在《巧用Vue3 composition api的计算属性实现扁平化tree连线》的基础上实现动画效果。看下目前的实现,展开折叠比较生硬,正好我们用vue提供的过渡动画特性来优化用户体验。原创 2024-07-21 14:04:58 · 254 阅读 · 0 评论 -
巧用Vue3 composition api的计算属性实现扁平化tree连线
本示例节选自vue3最新开源组件实战教程大纲(持续更新中)的tree组件开发部分。将进一步把基于Vue3 composition api的computed计算属性特性应用到组件开发实战中,继续以最佳实践的方式呈现给大家。原创 2024-07-19 18:13:26 · 549 阅读 · 0 评论 -
Vue3 Composition API计算属性实现扁平化树节点的索引
本教程是Vue3 composition api计算属性活学活用(作业题1 - 计算扁平化树树节点的索引)的答案。通过该示例,让读者进一步巩固Vue3 Computed计算属性的最佳实践。原创 2024-07-19 15:23:55 · 242 阅读 · 0 评论 -
Vue3 composition api计算属性活学活用(作业题1 - 计算扁平化树树节点的索引)
本示例节选自vue3最新开源组件开发思维导图 - tree组件开发部分。在学习了后,给读者朋友留的一道编程作业题。原创 2024-07-19 15:10:28 · 195 阅读 · 0 评论 -
tree组件实现折叠与展开功能(方式2 - visible计算属性)
本示例节选自的tree组件开发部分。考察Vue3 Composition API形式的计算属性的用法,computed可以单独用在ts文件中,实现ts的计算属性类型的定义。原创 2024-07-18 21:33:02 · 309 阅读 · 0 评论 -
tree组件实现折叠与展开功能(方式1 - expandedTree计算属性)
本示例考察响应式对象列表封装和computed计算属性的使用,以及数组reduce方法实现结构化树拍平处理的核心逻辑。原创 2024-07-18 17:03:06 · 396 阅读 · 0 评论 -
vue3最新开源组件实战教程大纲(持续更新中)
教程整体的大纲如上,第一阶段为开发环境搭建与工具整合,课程以发布,地址为:[vite5整合vue3开发环境实战]思维导图上会将重要的配置细节、开发步骤体现出来。第三阶段:可媲美Element Plus的Tree组件实战。的在线文档环境搭建,视频暂未上线。原创 2024-07-16 18:21:36 · 259 阅读 · 0 评论 -
最新vite脚手架配置ts-node工具
最新vite脚手架配置和使用ts-node工具注意事项~原创 2024-07-16 17:44:44 · 253 阅读 · 0 评论 -
vite脚手架搭建vitepress路径别名设置
录屏讲解如何为vite脚手架搭建的项目(包括vitepress整合)设置和使用路径别名。原创 2024-07-15 22:10:19 · 287 阅读 · 0 评论 -
解决第三方模块ts声明文件编译错误问题
录屏演示怎么解决第三方模块ts声明文件缺失的问题原创 2024-07-15 21:54:26 · 267 阅读 · 0 评论 -
Vue3单文件jsx输出多组件示例遇到的坑
Vue3单文件jsx输出多组件示例遇到的坑。,小卷在大佬的基础上再完善下实现。来定义和导出多个独立的小组件。可以忽略了,让每个小组件自己返回。的API使用上得到启发,可以在。原创 2024-07-14 19:56:04 · 316 阅读 · 0 评论 -
基于vite的vue脚手架工具整合:ts、jsx、eslint、prettier、stylelint、tailwind...
为了帮助vue新手更高效的学习vue3的基础知识、组件开发以及项目方案整合,小卷给大家整理了一个10分钟搞定《基于vite的vue脚手架工具整合》的教程。所有工具都是目前最新的版本,实践和调试过,没有一行多余的配置。原创 2024-07-13 16:54:20 · 211 阅读 · 0 评论 -
基于TSX的Vue3组件开发技能
jsx的集成参考相关小节。本教程介绍tsx在vue组件开发中的使用技巧,作为大家学习和工作的参考指南。原创 2024-07-11 14:31:25 · 444 阅读 · 0 评论 -
vue3最新开发环境篇
本篇带vue新手从0搭建最新vue3开发环境,提供工具整合的最佳实践,为后续vue学习以及项目开发效率提速。原创 2024-07-10 22:25:58 · 1850 阅读 · 1 评论