- 博客(52)
- 收藏
- 关注
RSS订阅
原创 手写js轮播图效果参考
本文介绍了一个完整的轮播图实现方案，包含CSS样式和JavaScript逻辑。CSS部分使用flex布局实现水平排列，通过transition添加平滑动画，并设计了导航按钮和指示器样式。JS部分采用无缝滚动技术，通过克隆首尾元素实现循环播放，包含自动播放、手动切换和指示器跳转功能。代码还处理了边界情况，防止动画过程中的重复操作，并实现了鼠标悬停暂停播放的交互效果。该轮播图支持响应式设计，是一个功能完备的前端组件实现方案。
2025-12-20 21:44:03
173
原创 Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
2025-12-02 21:41:05
916
原创 打造高灵活度动态表单：基于 React + Ant Design 的 useDynamicForm hooks 实现思路
本文介绍了一个基于React+AntDesign实现的useDynamicForm自定义hooks，用于高效构建动态表单。该方案通过Schema配置化方式封装了表单核心功能，支持多种组件类型、动态字段显示/隐藏、组件属性联动等特性。关键实现包括：1) 类型定义确保开发安全；2) 组件渲染函数处理动态属性；3) 状态管理同步表单值；4) 暴露完整API接口。使用示例展示了表单定义、动态交互和API调用的完整流程，相比传统开发方式可显著提升中后台表单开发效率，减少重复代码。
2025-12-02 21:34:44
973
原创 Uni微信小程序如何对接百度翻译
本文介绍了百度翻译API的封装实现方案。首先封装了一个通用的网络请求方法baiduRequest，支持GET/POST请求，包含请求拦截器、token处理和错误提示等功能。其次实现了MD5加密算法用于生成翻译请求签名，并提供了translateZhToJp翻译方法，支持中译日等语言转换。最后强调必须在小程序后台配置百度翻译API域名白名单，配置后可能需要删除并重新上传小程序才能生效。该方案完整实现了百度翻译API的调用流程，包含参数签名、请求封装等关键步骤。
2025-11-10 20:52:33
470
原创 前端根据文件后缀名智能识别文件类型的实用函数
本文介绍了一个实用的TypeScript函数matchFileType，用于智能识别文件类型。该函数通过提取文件后缀名，与预定义的11类文件类型（如图片、文本、Excel等）进行匹配，返回相应类型标识。若无后缀返回false，未知类型返回'other'。函数支持处理包含查询参数的URL路径，适用于文件上传组件等场景。使用示例：matchFileType(path?.split('?').shift())。这种轻量级解决方案能有效提升文件类型识别的开发效率。
2025-11-10 20:48:28
495
原创 基于 uni-app 原始代码实现彩纸特效：核心逻辑解析与应用
本文详细解析了基于uni-app(Vue3+TypeScript)实现的彩纸飘落特效代码。该方案采用"数据驱动DOM+CSS动画"的轻量级实现方式，通过动态生成彩纸元素并设置随机属性（颜色、大小、位置等），利用CSS动画模拟真实飘落效果。核心包括：1)通过confettiList数组存储彩纸属性并动态渲染；2)使用CSS关键帧动画控制下落效果；3)定时器自动管理生命周期。代码结构清晰，包含模板动态渲染、逻辑控制方法和样式定义三部分，无需额外依赖即可在uni-app全平台运行。该特效适用于
2025-09-21 17:34:12
752
原创 解决切换 Node 版本后 “pnpm 不是内部或外部命令”问题
摘要： 在使用nvm切换Node.js版本后，执行pnpm -v报错“'pnpm'不是内部或外部命令”，原因是全局安装的pnpm依赖与旧版本Node绑定。解决方法：将旧Node版本目录（如v20.10.0）中的pnpm.cmd和node_modules/pnpm文件夹复制到新版本目录（如v20.19.0）对应位置，重启终端后即可恢复。核心逻辑是手动迁移pnpm相关文件至新版本环境，确保路径一致性。（150字）
2025-09-21 17:20:35
1455
原创 JSON.stringify() 进阶用法详解
本文深入解析JSON.stringify()的高级特性。基础用法可将对象转为JSON字符串，而进阶功能包括：1)通过replacer数组过滤敏感字段；2)用函数自定义序列化逻辑，处理日期、布尔值等；3)使用space参数美化输出格式；4)实现toJSON()方法统一序列化逻辑。这些技巧适用于数据脱敏、日期处理等场景，但需注意函数、undefined等无法序列化。掌握这些方法可提升数据处理效率与代码质量。
2025-09-03 16:13:53
365
原创 uni-app与Vue3，实现3D圆柱形旋转画廊效果
本文介绍了如何使用uni-app和Vue3实现一个3D圆柱形旋转画廊效果。通过CSS3D变换技术，将图片排列在虚拟圆柱体表面，创造沉浸式视觉体验。文章详细讲解了实现原理：利用perspective创建3D透视效果，transform-style保持3D空间，通过rotateY和translateZ控制元素旋转和距离。提供了完整代码实现，包括图片排列计算、旋转控制和自动播放功能。该效果适用于产品展示、相册应用、旅游景点展示等多种场景，能显著提升应用视觉吸引力。
2025-09-03 16:08:52
1057
原创 使用uni-app和Canvas生成简易双列表格布局并长按下载到本地
本文介绍了在uni-app框架中使用Canvas技术创建健康风险评估报告页面的方法。通过Canvas基础设置、获取画布尺寸、绘制双列表格等步骤，实现了美观的数据可视化展示。文章详细讲解了核心绘制函数drawCanvas的实现，包括文本居中、分割线绘制等技术要点，并提供了完整代码示例。该技术适用于健康评估、电子病历、体检报告等多种医疗数据可视化场景，支持长按保存功能。文中还补充了获取画布尺寸和保存图片的方法参考，为开发者提供了完整的解决方案。
2025-08-28 17:04:52
570
原创 实现微信小程序的UniApp相机组件：拍照、录像与双指缩放
本文介绍了基于UniApp框架实现多功能相机组件的方法。该组件支持拍照、录像（最长60秒）、前后摄像头切换、双指缩放和模式切换等功能。核心实现包括：使用camera组件作为基础，通过触摸事件计算实现双指缩放，采用滑动切换拍照/录像模式，并设计了黑色主题界面。文章提供了完整的代码实现，包括相机设置、缩放逻辑、媒体捕获等功能模块，以及SCSS样式设计。组件还包含缩放级别显示、预览图片等辅助功能。该实现为开发者提供了微信小程序中相机功能的完整解决方案。
2025-08-28 17:02:03
1196
原创 基于Uni-app+vue3实现微信小程序地图固定中心点范围内拖拽选择位置功能（分步骤详解）
本文介绍了基于Uni-app的地图位置选择功能实现方案，主要包含地图初始化、服务区域绘制、位置检测和交互界面开发。通过配置Map组件和定义多边形边界，实现服务区域可视化；利用射线法判断坐标点是否在服务区内；开发覆盖层UI显示位置信息和操作按钮，包括返回服务区和确认位置功能。文章详细说明了各步骤的代码实现，并特别指出moveToLocation移动API在真机环境的适配问题。该方案适用于打车、外卖等需要限定服务范围的场景，提供完整的交互式位置选择体验。
2025-08-16 14:41:48
737
1
原创 基于uni-app+vue3实现的微信小程序地图范围限制与单点标记功能实现指南
本文详细介绍了使用uni-app框架在微信小程序中实现区域限制地图标记功能的完整流程。首先通过map组件搭建基础地图并设置郑州市为初始中心点，然后利用polygons属性绘制郑州市边界范围。通过实现点击事件处理和射线法判断点位是否在郑州市范围内，确保标记点只能添加在指定区域内。最后添加信息显示区域展示选中位置的经纬度坐标，并给出范围外提示。文中提供了完整的代码实现，包括地图组件配置、多边形绘制、点位判断逻辑和UI交互等关键环节，开发者可根据实际需求调整区域范围或扩展功能。
2025-08-16 14:36:41
830
原创 Uni-app + Vue3+editor富文本编辑器完整实现指南
本文详细介绍了在Uni-app框架下使用Vue3开发富文本编辑器的完整实现方案。解决uni.createSelectorQuery()在vue3版本组件化封装后拿不到实例问题，编辑器包含工具栏和编辑区两大模块，支持加粗、斜体、标题样式、文本对齐、列表、图片插入等常见功能。
2025-08-13 08:57:34
738
原创 解决uni-app微信小程序编译报错：unexpected character `1`
摘要：uni-app微信小程序开发中，template模板内的英文符号<和>会被误认为HTML标签，导致编译错误unexpected character 1。
2025-08-13 08:51:03
560
原创 Tailwind CSS 自定义工具类与主题配置指南
本文介绍了在TailwindCSS中添加自定义工具类和主题配置的方法。在工具类方面，通过@layer utilities指令可以创建上下浮动（floatY）和左右浮动（floatX）动画效果，建议将动画类集中管理并采用语义化命名。在主题配置方面，演示了如何在tailwind.config.js中扩展颜色、字体和圆角等样式，如定义primary、secondary等自定义颜色，以及Inter、Roboto等字体族。这些配置既能保持TailwindCSS的高效性，又能创建具有项目特色的样式系统。
2025-07-25 09:43:43
448
原创 Ant Design 结合 React 参考 Vben 逻辑实现的描述列表组件封装实践
本文介绍如何基于Ant Design的Descriptions组件，结合React和TypeScript封装一个功能完善的描述列表组件。该组件支持动态配置描述项、自定义样式、条件渲染和动态更新，通过useImperativeHandle暴露实例方法，并采用VbenAdmin的设计思想实现。核心实现包括类型定义、组件封装、自定义Hook和组件导出，确保类型安全和灵活易用。使用示例展示了组件的配置方式，适用于用户资料、订单详情等场景。这种封装方式提高了代码复用性和维护性，是现代前端开发中的最佳实践。
2025-07-25 09:40:37
1047
原创 Vue 中 effectScope() 的全面解析与实战应用
摘要： Vue3.2引入的effectScope API用于创建副作用作用域，集中管理watch、watchEffect等响应式副作用，支持批量停止和自动清理。基础用法通过scope.run()注册副作用，scope.stop()统一停止；支持嵌套作用域（父作用域停止自动停止子作用域）和独立作用域（需手动管理）。适用于组件封装（如计时器逻辑复用），建议按功能划分作用域、及时清理避免内存泄漏，嵌套层级不宜过深。该API提升了副作用管理的效率和安全性。
2025-07-15 23:50:03
382
原创 Element plus参考vben逻辑实现的描述列表组件封装实践
本文介绍了一个基于ElementPlus封装的配置化描述列表组件。该组件通过schema配置项实现动态渲染，支持自定义标签/内容宽度、条件显示和自定义渲染函数。核心实现包括Description.vue组件文件、类型定义和hook函数，提供了setDescProps方法用于动态更新属性。使用时只需传入data数据和schema配置即可生成描述列表，具有类型安全、灵活配置等特点，有效减少了重复代码，提升了开发效率。组件还支持进一步扩展折叠功能等特性。
2025-07-15 23:43:17
683
原创 在Vue3中集成wangEditor富文本编辑器：完整指南
本文介绍了在Vue3项目中集成wangEditor富文本编辑器的方法。主要内容包括：1) 安装wangEditor相关依赖；2) 实现编辑器组件，重点说明编辑器实例管理（使用shallowRef）、双向绑定（v-model）、配置选项（工具栏和编辑器行为设置）以及异步内容加载；3) 提供父组件调用示例和高级配置（自定义工具栏和上传功能）。文章展示了如何通过组件化方式将wangEditor无缝集成到Vue3项目中，既能保持完整功能，又能融入Vue3响应式系统，为开发者提供了轻量级、功能强大的富文本编辑解决方案
2025-07-07 16:51:59
900
2
原创 Taro+Vue3实现微信小程序富文本编辑器组件开发指南
摘要：本文介绍了一个基于微信小程序原生editor组件封装的富文本编辑器实现方案。该组件主要功能包括：可配置的工具栏、双向数据绑定、图片上传和文本格式控制。关键技术点涉及编辑器实例管理、内容同步机制、图片处理流程和格式控制方法。组件采用Vue3+TypeScript开发，通过createSelectorQuery获取编辑器实例，实现了getContents/setContents的内容同步，并整合了图片选择和上传API。样式使用SCSS编写，包含编辑器容器和工具栏布局。注意事项包括服务器配置、样式限制和性能
2025-07-07 16:49:08
887
原创 Vue 实现图片裁剪功能：基于 vue-cropper 和 Element Plus 的完整解决方案
本文介绍了使用Vue3和ElementPlus实现图片裁剪组件的技术方案。
2025-06-17 14:54:29
1579
原创 Vue 中 v-model 的三种使用方式对比与实践
本文详细分析了Vue3中v-model的三种实现方式：基础用法、useVModelHook和defineModel宏。基础用法适用于所有Vue3版本，但代码较为冗长；useVModelHook通过封装简化了双向绑定的实现，适合复用场景；defineModel宏是Vue3.4引入的新特性，代码简洁且类型推断良好，是未来推荐的方式。开发者应根据项目需求和Vue版本选择合适的实现方式，新项目优先使用defineModel宏，旧项目可逐步迁移，复杂场景可考虑useVModelHook，同时建议使用Ts
2025-05-19 21:21:45
1302
原创 ant design 的 复选框 checkbox如何实现纵向排列
该组件并不支持 vertical 这一属性来控制是否纵向排列。只能通过修改样式去实现---react同理。通过样式 将其设置为grid布局即可。gap是行与行之间的间距。
2025-05-19 21:15:50
208
原创 VSCode如何修改默认扩展路径和用户文件夹目录到其他盘以及微信开发工具如何修改扩展路径到其他盘
ps:因公司电脑c盘内存严重不足，而出本篇文章。
2025-04-24 21:49:04
4588
2
原创 解决yarn install 报错 error \node_modules\electron: Command failed.
解决yarn install 报错 error \node_modules\electron: Command failed.
2025-04-24 21:45:01
1014
原创 小程序实现身份证上传识别功能
本文将详细介绍小程序如何实现身份证上传识别功能。我们将分步骤讲解代码的实现过程，帮助你理解每个部分的作用。框架使用:taro--(uni,微信原生通用)
2025-03-29 14:34:17
663
原创 前端vue如何引用(按需加载)百度地图，并组件化封装。
本文详细介绍了如何在Vue项目中使用并按需加载百度地图api，地图初始化，创建标注和信息窗口、搜索功能及事件处理。
2024-12-09 20:10:00
1551
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人