- 博客(6)
- 收藏
- 关注
RSS订阅原创 大屏自适应方案进阶：从基础缩放到多维度适配的完整实践
通过智能缩放层保持设计稿整体比例，利用弹性布局层（CSS Grid）实现内部模块响应式排列，并针对 Ant Design Vue 组件库进行深度主题与尺寸适配。该方案解决了非标准大屏（如4K/8K）下的拉伸变形、布局错乱与组件兼容性问题，最终实现“一次开发”即可在多种分辨率下清晰、美观展示。
2026-01-30 09:48:16
308
原创 Vue3 + 高德地图：实现多功能标记点管理与事件交互
本文介绍了基于Vue3和高德地图API开发的可配置化地图标记点管理系统。系统采用Vue3的CompositionAPI封装核心逻辑，通过中央化配置管理多类型标记点，支持悬停、点击等交互效果。关键技术包括：1)配置驱动设计实现标记点灵活扩展；2)响应式状态管理；3)性能优化策略；4)事件总线实现组件通信。该系统具有高度可配置、交互丰富、性能优化和易于扩展等特点，适用于需要管理大量可视化元素的GIS应用场景。
2026-01-30 09:11:35
704
原创 优雅的文件上传组件：基于vue2 + Element UI 的完整实现与最佳实践
本文详细解析了一个基于ElementUI的Vue文件上传组件实现。该组件提供多文件上传、格式验证、大小限制等核心功能，支持文件预览和列表管理。通过props实现高度可配置化，包含上传前校验、成功回调处理等完善逻辑，并考虑安全性和用户体验。组件采用Token身份验证，支持文件列表增删改查，提供进度反馈和错误处理。文中还给出了使用示例和性能优化建议，如分片上传和图片压缩，帮助开发者快速实现健壮的文件上传功能。
2025-12-09 09:43:02
812
原创 Vue 3 WebSocket 自定义 Hook：自动重连与心跳检测完整实现
本文介绍如何在Vue3中封装一个功能完善的WebSocket Hook，实现实时通信功能。该Hook支持自动连接、自动重连（可配置次数和间隔）、心跳检测、状态管理、消息发送及自动清理资源等核心功能。通过详细的代码实现展示了如何创建可复用的WebSocket工具，包括连接管理、错误处理和心跳机制。文章还提供了基本使用方法和在Composition API中的实践示例，并列举了可配置选项和注意事项。该解决方案能有效简化WebSocket在Vue3中的使用，提高应用稳定性和开发效率。
2025-09-05 09:24:45
684
原创 大屏全尺寸自适应实现方案及 Ant Design Vue 组件库适配配置指南
本文介绍了两种基于transform的页面缩放实现方案：1.整体页面缩放方案通过在body节点上应用transform缩放，保持布局结构但可能导致非等比拉伸；2.指定节点缩放方案使用Vue响应式数据动态计算缩放比例。两种方案都通过监听resize事件实现自适应，差异在于整体缩放直接作用于body，而节点缩放通过computed动态计算样式。文末还提供了Ant Design Vue组件的px转rem配置方法。实现代码展示了完整的比例计算、事件监听和样式处理流程。
2025-06-12 09:28:04
945
原创 AntDV4.0 的 Switch 组件状态变更时，通过 API 请求结果控制开关状态
本文实现了一个带加载状态的开关组件，通过Vue3的ref进行状态管理。开关切换时显示加载状态，并模拟后端API请求（800ms延迟，70%成功率）。根据API响应结果更新开关状态并显示相应提示信息：成功时保持新状态，失败或异常时恢复原状态。请求处理完成后隐藏加载状态，确保用户友好的交互体验。
2025-06-03 18:00:19
652
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人