- 博客(42)
- 收藏
- 关注
RSS订阅原创 【Nova UI】十九、打造组件库之折叠组件（下）：深入实现与潜在陷阱
在上篇中，我们对折叠组件的开发做了前期铺垫。现在，将深入其具体实现！不过，开发过程中会有一些 小坑 。本文会详细阐述如何运用Vue特性将折叠组件的设计转化为代码，同时分享可能遇到的潜在问题及解决办法。
2025-05-15 08:34:40
1543
原创 【Nova UI】十八、打造组件库之折叠组件（上）：基本介绍、设计思路与实践
在之前的滚动条组件开发系列文章中，我们已经逐步深入地探讨了从基础功能的搭建，到各种交互功能的实现，不过，组件开发的旅程还在继续哦，我们将在本篇文章中开启一个新的篇章 —— 折叠组件的开发啦~
2025-05-14 08:49:13
1072
原创 【Nova UI】十七、打造组件库之滚动条组件（下）：拖动滑块与滚动区域交互的实现
在之前的内容中，我们已经深入探讨了滚动条组件开发的多个关键方面啦，包括前期准备工作的完成、核心功能的实现以及滑块大小和滚动距离的计算，我们将在本篇文章中继续深入完善这个组件，探索更高级的交互功能。
2025-05-14 08:32:29
894
原创 【Nova UI】十六、打造组件库之滚动条组件（中）：探秘滑块的计算逻辑
在上篇中，我们完成了滚动条组件开发的前期准备工作，包括理论推导、布局规划和基础设置。现在，我们将把这些准备转化为实际代码。我们会详细阐述如何实现各项功能，解决开发中的技术挑战，为用户带来更好的滚动体验
2025-05-13 20:20:09
696
原创 【Nova UI】十五、打造组件库之滚动条组件（上）：滚动条组件的起步与进阶
现在，前端领域正朝着更加复杂和多元化的方向迅速发展，用户对于交互体验的期望也在持续攀升。当用户浏览网页时，一个流畅顺滑、功能完善的滚动条起着关键作用 。鉴于之前积累的经验，我们决定着手开发滚动条组件。
2025-05-13 20:19:56
970
原创 【Nova UI】十四、打造组件库之按钮组件（下）：按钮组组件的构建之旅
在之前的探索中，成功雕琢出了功能完备且样式精美的Vue按钮组件，它在前端界面上绽放着独特的光彩。然而，前端开发的创新之路永无止境。如今，为了满足更丰富的交互需求，我们将目光聚焦在按钮组组件的实现上。
2025-05-12 09:24:39
977
原创 【Nova UI】十三、打造组件库之按钮组件（中）：样式雕琢全攻略
在上一篇文章中，我们已成功搭建起 Vue 按钮组件的基本架构 🏗️，赋予其强大的核心功能与流畅的交互逻辑。此刻，一个功能完备的按钮雏形已然呈现。仅有功能远远不够，样式的精心雕琢同样关键。
2025-05-12 09:22:40
1086
原创 【Nova UI】十二、打造组件库之按钮组件（上）：迈向功能构建的关键一步
在上一篇文章中，我们深入探索了 icon 组件从测试到全局注册的全过程🎯，成功为其在项目中稳定运行筑牢了根基。此刻，组件库的建设之旅仍在继续，我们将目光聚焦于另一个关键组件 —— 按钮组件。
2025-04-27 19:32:26
1274
原创 【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
在上一篇文章中，我们借助自动化的精妙技艺，成功将.svg文件转化为 SVG Vue 组件，为组件库的宏伟蓝图添上浓墨重彩的一笔✨。接下来，让我们深度探索 icon 组件的测试、使用以及全局注册的实现。
2025-04-25 09:25:36
1118
原创 【Nova UI】十、打造组件库第一个组件-图标组件（下）：从.svg 到 SVG Vue 组件的高效蜕变✨
在组件库开发中，我们已经成功打造并完善了图标组件体系。然而，随着业务版图的不断扩张，手动逐个编写 SVG Vue 组件的传统方式，逐渐暴露出效率低下的短板，今天，一同踏上探索自动化生成的奇妙之路。
2025-04-25 09:23:58
1088
原创 【Nova UI】九、打造组件库第一个组件-图标组件（中）：属性、功能与样式的完美融合
在上一篇文章中，我们成功搭建起 SVG 图标组件包的基础架构。如今，我们将目光聚焦于图标组件样式的雕琢工作，这不仅是提升组件库视觉一致性的关键🔑，更是增强用户体验的重要一环。
2025-04-23 10:27:56
768
原创 【Nova UI】八、打造组件库第一个组件-图标组件（上）：图标组件开发实战攻略
在组件库的构建中，那些简洁美观、表意清晰的图标组件🎨，宛如灵动的视觉音符🎶，为用户体验增添了独特魅力。让我们一同开启组件库首个组件 —— 图标组件的开发之旅，一探究竟🔍。
2025-04-23 10:26:15
870
原创 【Nova UI】七、SASS 全局变量体系：组件库样式开发的坚固基石
咱们已经实现了 SASS 中一系列实用的函数和混入，这篇文章将带你深入了解怎样利用这些工具实现 SASS 全局变量的巧妙定义、灵活运用，进而让整个组件库的样式焕发出更加协调统一的光彩🌟
2025-04-22 11:01:59
790
原创 【Nova UI】六、SASS 赋能组件库：通用方法与混入的变革力量
在搭建组件库时，我们已用 SASS 实现 BEM 规范，为样式管理筑牢根基🏗️。但 SASS 远不止于此，其丰富通用方法和灵活变量机制，将为组件库样式雕琢带来质的飞跃。
2025-04-22 11:00:58
1140
原创 微信小程序基于Canvas实现头像图片裁剪（上）
嘿，打工人混迹职场这么久，图片处理肯定都没少碰。不过咱说实话，大部分时候都是直接 “抄近道”，用现成的三方组件😏。就像我，主打一个会用工具，毕竟善用工具可是咱人类的 “超能力”，不会用那可就真成 “原始人” 啦🤣。最近在搞微信小程序开发时，遇到个需求：用户上传图片得能裁剪。我瞅了瞅 UI 给的效果图，好家伙，找遍了都没发现合适的组件，这下没办法，社畜的 “使命感” 上身，只能自己动手，丰衣足食咯😅。
2025-04-03 09:19:56
1426
1
原创 【Nova UI】五、解锁 SASS 魔法，优雅实现 BEM 规范
此前，我们领略了JavaScript为BEM规范在交互逻辑实现上的精彩呈现🎯，而在样式设计领域，不同工具各有所长。本文将深入剖析SASS实现BEM规范的方法与技巧，为你的前端开发工具箱增添关键技能。
2025-04-02 09:01:15
1077
原创 【Nova UI】四、JavaScript 与 BEM 规范的梦幻联动：前端开发新动能
我们已经领略了 BEM 规范在 CSS 样式管理方面的强大功能，它为我们的样式代码带来了秩序与高效。但在前端开发中，JavaScript 作为交互逻辑的核心语言，与 CSS 紧密协作，该如何实现呢？
2025-04-01 08:51:26
589
原创 【Nova UI】三、探秘 BEM：解锁前端 CSS 命名的高效密码
上一篇文章中，我们一步一个脚印，扎实地完成了 Vue 组件库搭建的环境搭建工作。当我们把目光聚焦到组件库的样式设计时， BEM规范，自然而然地进入了我们的视野，让我们一同深入探寻 BEM 规范的奥秘。
2025-04-01 08:34:01
382
原创 【Nova UI】二、解锁 Vue 组件库环境搭建秘籍：pnpm、TS 与 Monorepo 的协同
回顾上文，我们已全方位洞悉搭建 Vue 组件库所需的技术选型，也透彻明晰后续搭建步骤的整体规划。此刻，我们即将正式踏入实战的首站 —— 环境搭建，让我们一同深入探索，解锁其中蕴藏的奥秘。
2025-03-31 08:40:12
428
原创 【Nova UI】一、探秘 Vue 组件库搭建：从技术选型到持续迭代
此前，我潜心钻研了如何搭建一个组件库✨，然而一直未曾将所学整理并分享出来，实在是有点小遗憾呢。近期恰好得闲，便抓紧时间梳理一番，将其呈现于此，希望能对大家有所帮助哦。
2025-03-31 08:26:12
1784
原创 [特殊字符]【Chatterbox（话匣子）】如何实现拖拽、粘贴文件上传？
话匣子已经上线了一段时间了，有些小伙伴在使用过程中觉得图片上传太鸡肋了，想要类似于微信一样的上传功能。点击选择文件上传步骤比较多，不太友好。下面就简单聊一下我对于粘贴文件、拖拽文件上传的实现。
2025-03-30 09:55:57
706
原创 [特殊字符]【Chatterbox（话匣子）】如何在自己的网站中接入QQ登录？
🎈Chatterbox（话匣子）实时聊天系统已经重构上线有两周了，有些小伙伴们觉得使用邮箱验证码登录太麻烦了，可是个体微信不让扫码登录呀😡。那咱们只能退一步，加一个QQ登录吧！
2025-03-30 09:46:31
739
原创 [特殊字符]我在 Chatterbox（话匣子）中 WebRTC 的使用-下篇（实际应用-实现实时语音视频通话）
🎈在上篇文章中我介绍了一下WebRTC的基本概念。这篇我们来简单聊一聊WebRTC的基本用法、两个客户端之间的通讯，以及我在Chatterbox（话匣子）中的应用方式。
2025-03-30 09:29:02
904
原创 [特殊字符]我在 Chatterbox（话匣子）中 WebRTC 的使用-上篇（基本介绍）
我的上篇文章中介绍了即时聊天Chatterbox（话匣子）中WebSocket的应用，那定少不了实时语音、视频通话功能。那就得聊一下WebRTC Web Real-Time Communication
2025-03-29 17:24:46
874
原创 [特殊字符]我在 Chatterbox（话匣子）中 Websocket 的使用-下篇（实际应用）
🎈在上篇文章中我介绍了一下WebSocket的基本概念以及它的基本使用。这篇我们来简单聊一聊WebSocket的两个客户端之间是如何通讯的，以及我在Chatterbox（话匣子）中的应用方式。
2025-03-29 16:16:19
1080
原创 [特殊字符]我在 Chatterbox（话匣子）中 Websocket 的使用-上篇（基本介绍）
认识我的人应该知道我最近重构了即时聊天系统并改名为 Chatterbox（话匣子），既然是聊天系统那必然少不了使用WebSocket。下面简单聊一下Chatterbox是如何使用WebSocket的。
2025-03-29 10:08:58
1106
原创 用空闲时间做了一个小程序-二维码生成器
一直在摸鱼中赚钱的大家好呀~ 自从国庆前的文字转语音的工具上线到现在已经将近有1个月没有更新小程序了。但是今天终终终终终于又有个小工具上线了，希望这个小工具可以帮助到更多的鱼友们(没错就是你们)。
2025-03-29 10:04:40
1041
原创 【vue】聊一聊嵌套路由使用keep-alive缓存的实现
大家应该都写过类似布局的页面，一个顶部导航、一个侧边菜单和一个主要内容区域。其中只有主要内容区域是变化。在这个基础上实现缓存大家应该都有经历过。那多层嵌套路由怎么实现呢？
2025-03-27 09:07:01
1948
原创 用空闲时间做了一个小程序-文字转语音2.0（语音播放进度条）
这篇文章就接着上文继续往下实现语音播放进度的解决方案。这篇文章会讲到播放进度条的实现，希望这篇文章可以给更多的鱼友们的解决一些开发中遇到的问题或者启发，也希望楼主的小程序有更多的鱼友加入。
2025-03-27 08:51:48
652
原创 用空闲时间做了一个小程序-文字转语音2.0（获取语音时长）
自从小程序上次增加了一个文字转语音的功能之后，使用的用户不是很多，可能与这个功能实现有关系。当时只支持转换及下载，使用起来不是很友好，于是我就开始做语音分享给好友的功能。
2025-03-26 09:14:58
800
原创 【vue】聊一聊拖拽改变DOM大小的实现
大家或多或少应该有遇到过通过拖拽改变DOM大小的需求：比如说页面的侧边栏支持拖拽调整大小，使内容可视区变大。
2025-03-25 20:16:42
341
原创 用空闲时间做了一个小程序-用户隐私协议
大家一定都有收到关于微信小程序隐私保护指引设置公告。涉及处理用户个人信息的小程序，需通过弹窗等明显方式提示用户阅读隐私政策等收集使用规则。就是要需要用户明确同意用户隐私协议才能调用微信提供的部分接口。
2025-03-24 19:21:55
591
原创 用空闲时间做了一个小程序-文字转语音
刚发布小程序的时候只有作者交流群里面的小伙伴进行了抢先体验，之后用户增长就没有那么的乐观了。为了不辜负知名UI设计的出的UI图，这里浅浅的贴一下知名UI设计师的原图。将生成的文件保存到服务器中，然后请求接口的时候返回对应的资源路径（弊端就是占用我服务器内存）。这次更新的内容是一个可以将文字转为语音的一个小工具，先来看下知名UI设计师设计的页面。下面就是下载语音的功能了，当做到这边的时候发现。
2025-03-20 20:30:46
554
原创 [特殊字符]大家好，我是拖孩（好市民）[特殊字符]
哈喽，大家好呀👋，我是拖孩（群友们也叫我好市民），超开心能在活力满满且创意无限的稀土掘金平台，和各位超厉害的开发者大大们相遇🎉！ 作为一名专注于前后端开发领域的 “搬砖人”，我投身这个行业已有数年
2025-03-20 20:26:36
535
原创 一个即时聊天系统，我叫它 Chatterbox（话匣子）
🎈Chatterbox（话匣子）是im-vue重构后的即时聊天系统🆕。 是通过 Websocket 实现了消息的实时传递 和 通过 RTCPeerConnection 实现了语音通话、视频通话。
2024-06-21 17:13:01
845
原创 用空闲时间做了一个小程序
自从接触了小程序开发之后，就想做一个自己的小程序项目。这不，从摸鱼时间中挤出了部分空闲时间不断完善和踩坑，一点点的墨迹出来了。由于我自己做出来的界面不能说富丽堂皇，但是确实也上不了台面，所以高价聘请知名设计师设计了亿下下。
2023-09-01 15:18:20
154
原创 【vue】聊一聊Element UI的自定义主题颜色
ElementUI组件库相信大家一定都接触过。但是自定义主题颜色的需求有接触过的应该不多，至今我是没有遇到类似的需求。之所以讲这个需求，是因为在我的开源项目中有做到这个需求，所以在这里和大家聊一聊。
2023-06-09 10:28:03
6276
原创 【vue】聊一聊监听Element的边界尺寸
上面两种方式都是实现需求，但是都有相同的一个弊端：如果有很多组件里面都需要监听，那所有的组件都要写这些重复的代码。显然这样并不是我们所希望的，有没有什么方式可以不用这样做呢？当然是有。下面我就带领大家使用自定义指令的方式基于ResizeObserver来实现这个需求。由上文介绍的ResizeObserver中知道它的回调函数返回的是一个数组，那我们就可以得出它是可以监听多个Element的。以上代码就可以实现需求，但是并不能满足所有场景，比如有些场景可能需要Element。
2023-06-08 16:20:52
295
原创 【vue3】聊一聊组件的二次封装
在实际开发中都有经历过对组件进行二次封装，在进行封装的时候要保留组件已有的功能，这时需要重写组件方法，当组件已有大量功能时候，则需要重写很多重复代码。且组件功能进行修改的时候，封装的组也需要对应修改。
2023-06-07 17:23:01
4279
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人