- 博客(50)
- 收藏
- 关注
RSS订阅原创 级联面板（el-cascader-panel）“可切组、不可勾选”置灰功能总结
本文介绍了一种通过CSS实现ElementPlus级联选择器部分禁用的优化方案。传统disabled属性会触发父子联动问题，导致父级被强制禁用。创新采用pointer-events技术实现"视觉禁用+功能保留"效果：1)精准锁定第一列复选框禁止勾选；2)保留大类节点点击切换功能；3)完全禁用第二列人员选择。该方案不修改组件状态，通过动态类名控制样式，既保持UI交互流畅性，又避免数据流破坏，具有版本兼容性强、用户体验佳等优势。
2026-07-10 11:47:04
212
原创 完美搞定 4K 屏适配：记一次 1080P 绝对定位与切图严重错位的完美跨越
本文探讨了前端开发中4K屏幕适配的常见问题及解决方案。当项目突然需要兼容4K分辨率时，传统的绝对定位方法会导致切图元素与背景错位。文章分析了两种常见误区：仅调整定位坐标或依赖rem布局都无法完美解决问题。核心解决方案是结合CSS的calc()函数和vw视口单位，通过将元素尺寸和位置绑定到屏幕宽度比例来实现精确适配。具体实现包括：为容器设置基于vw的计算尺寸，强制图片填满父容器并保持比例。这种方法确保了在不同分辨率下都能实现像素级精准对齐，解决了4K适配中的关键难题。
2026-05-25 10:09:04
302
原创 从插件冗余到极致流畅：我的 Vue 3 开发环境“瘦身”实录
摘要：本文分享VSCode插件"断舍离"经验，针对Vue3+Vite+TypeScript开发环境精选16款核心插件。重点推荐：Vue官方插件（替代Volar）、PrettyTypeScriptErrors（优化报错显示）、ConsoleNinja（行内调试输出）和GitLens（代码溯源）。通过移除重复功能插件（如PathAutocomplete）和无关语言支持，显著提升启动速度和编码效率。建议将配置存入extensions.json实现团队共享，打造专注逻辑的高效开发环境。（149字
2026-03-26 10:46:25
350
原创 代码里的浪漫：如何优雅地在控制台“隐藏”一个炫酷的个人彩蛋？
本文分享了在前端项目中隐藏控制台彩蛋的创意方案。通过Base64编码隐藏文字内容，利用CSS的text-shadow属性实现3D字体效果，并采用IIFE自执行函数避免显式调用。最终实现了一个既能在控制台展示炫酷3D文字效果，又能在代码中保持隐蔽性的彩蛋功能。这种方案不仅具有趣味性，还能避免被误删，为项目增添个性色彩。文章详细介绍了从设计思路到具体实现的完整流程，为开发者提供了在代码中创造惊喜的新思路。
2026-03-25 16:41:22
360
原创 Vue3 + TS 高德地图拾取组件：从异步加载到逆地理编码的深度实践
本文介绍了一个基于Vue3、TypeScript和高德地图API开发的打点拾取组件，重点解决了无人物流等业务场景中的精准坐标拾取问题。组件核心功能包括：1）通过nextTick解决地图初始化与弹窗加载的异步问题；2）对高德搜索建议数据进行过滤和格式化；3）实现点击拾取与逆地理编码功能。文章详细解析了组件实现的关键代码，包括地图初始化、坐标转换和UI交互等核心逻辑，并提供了完整组件代码和使用教程。该组件封装了复杂的地图操作，使父组件只需关注业务数据，提升了开发效率和用户体验。
2026-01-28 15:50:22
444
原创 实战笔记：在 Ubuntu 离线部署 Vue + Nginx 踩坑与避雷指南
本文记录了在Ubuntu服务器上手动编译安装Nginx并部署Vue项目的实战经验。重点包括：1）正确设置Web目录权限；2）编写稳健的Nginx配置，解决Vue路由刷新404问题；3）处理常见部署问题如端口冲突、权限不足等；4）提供常用运维命令。特别强调手动编译版Nginx的特殊注意事项，如配置文件路径差异和启动方式。通过详细步骤和避坑指南，帮助开发者快速完成类似部署任务。
2025-12-30 14:27:34
828
原创 前端大文件分片上传实现与断点续传方案（含完整代码讲解）
本文介绍了一种大文件上传的解决方案，采用分片上传+断点续传+秒传校验的方式解决传统上传方式的问题。核心实现包括：1）前端自动切片（默认5MB/片）；2）查询已上传分片实现断点续传；3）分片上传与校验；4）所有片段上传完成后自动合并。文章提供了完整的代码示例，详细解析了切片、断点续传、分片校验等关键逻辑，并说明了与后端的交互方式。该方案具有逻辑清晰、易接入UI框架、支持秒传等优势，特别适合大文件上传场景。
2025-12-01 13:54:40
2523
原创 基于 Vue3 封装大华 RTSP 回放视频组件（PlayerControl.js 实现）
本文介绍了在Vue3项目中封装大华视频回放组件的实现方案。针对浏览器无法直接播放RTSP流的问题，采用PlayerControl.js SDK和RTSP-over-WebSocket技术实现视频播放。组件封装了播放器生命周期管理、参数自动重载、错误处理等功能，支持通过props控制播放参数（通道号、时间段等）。文章详细说明了SDK引入方式、核心代码实现（包含RTSP URL拼接、播放器初始化等）、使用方法以及常见问题排查，提供了一套完整的可复用解决方案。该方案不仅适用于大华设备，也可扩展应用到其他厂商的视频
2025-11-11 17:39:55
994
原创 从零运行一个最简 Electron + Vue3 桌面应用（完整入门教程）
本文提供了一个快速搭建Electron+Vue3+Vite桌面应用的详细指南。从环境准备到项目创建，详细介绍了如何安装Electron依赖、配置主进程文件，以及修改package.json脚本。通过简明的步骤说明，开发者只需复制命令即可创建并运行一个基础桌面窗口。解决方案中使用wait-on和concurrently工具实现前后端并行启动，并针对开发和生产环境提供了不同的加载方式。最终通过npm run dev命令即可启动包含Vue3欢迎页面的Electron应用，为后续开发功能奠定基础。
2025-10-29 14:40:59
712
1
原创 ECharts 实时数据平滑更新实践（含 WebSocket 模拟）
本文介绍了实现平滑动态数据可视化的方案。通过监听数据流变化，利用setOption局部更新而非全量重绘，解决折线图闪烁问题。示例模拟WebSocket每秒推送数据，图表平滑左移并自动移除旧数据。关键点包括深度监听数据变化、限制显示点数、优化动画参数等。这种方案适用于实时监控、IoT等需要流畅展示动态数据的场景，相比全量更新能显著提升视觉效果和性能。
2025-10-20 15:37:22
578
原创 Vue3 + Element Plus 弹框树形结构首次打开不更新问题排查与解决
摘要： 在Vue3+ElementPlus开发中，使用el-tree组件时首次打开弹框显示旧数据的问题，源于Vue响应式更新与DOM渲染的异步性。解决方案包括：1. nextTick 等待DOM更新；2. v-if强制重渲染 组件；3. 弹框@open事件 自动刷新数据。推荐组合方案：更新数据后通过nextTick和v-if确保首次加载正确。该问题揭示了Vue异步更新与组件初始化渲染的机制，理解时序是解决类似问题的关键。（150字）
2025-10-20 14:00:37
677
原创 前端实现 MD5 + AES 加密的安全登录请求
本文介绍Vue项目中实现安全登录的方案：前端先对密码进行MD5哈希，再用AES加密，最后以x-www-form-urlencoded格式发送给后端。详细说明了加密工具封装、依赖安装、接口改造和调用流程，强调key/iv需与后端一致，并提醒HTTPS仍是必要保障。该方案通过双重加密提升密码传输安全性，同时适配后端解析要求。
2025-08-11 14:48:57
474
原创 基于 Vue + 高德地图实现卫星图与 Mapbox 矢量瓦片
本文介绍了基于Vue3+高德地图JSAPI实现卫星底图与矢量数据融合渲染的技术方案。通过Mapbox矢量瓦片(PBF格式)，可灵活定制车道线、标线等交通元素的显示样式，叠加在高德卫星影像上。文章详细讲解了地图初始化、卫星底图加载、矢量瓦片图层创建与样式设置等核心实现步骤，并提供了性能优化建议和扩展思路。该方案适用于智慧交通、城市规划等需要高定制化地图可视化的场景，具有灵活性强、性能优越的特点。
2025-08-08 17:08:59
1798
1
原创 基于 Vue3 + ECharts 实现渐变分段折线图：支持动态区间、响应式渲染与颜色控制
本文介绍了基于Vue3+ECharts开发的渐变分段折线图组件，适用于空气质量、路况指数等需要按数值区间动态变色展示的场景。组件核心功能包括：支持传入valueList控制颜色分段，自动生成渐变效果，响应式自适应窗口大小，以及数据变更自动重绘。通过getSegmentsByType方法可灵活配置不同业务类型的分段策略，使用线性渐变实现平滑过渡。组件采用ResizeObserver监听尺寸变化，watch监听数据更新，具有高度可复用性，并支持未来扩展多线绘制、动态提示等进阶功能。
2025-07-22 11:16:12
1222
原创 Vue + WebSocket 实时数据可视化实战：多源融合与模拟数据双模式设计
本文介绍了一个基于Vue3和ECharts的多WebSocket数据源实时可视化解决方案。核心功能包括：支持4个WebSocket数据源连接与自动重连机制，提供模拟数据接口方便开发调试；通过响应式状态管理合并各数据源的车流总量和车辆类型分布数据；使用ECharts动态渲染饼图展示统计结果，并优化了视觉效果。方案采用模块化设计，包含数据连接、合并计算、格式化处理和图表渲染等完整流程，特别适合交通监控等需要实时数据可视化的大屏项目，兼顾开发效率和系统稳定性。
2025-07-22 10:31:34
1020
原创 Vue3 + Element Plus 实现树形结构的“单选 + 只选叶子节点 + 默认选中第一个子节点”
本文介绍如何在Vue3中使用ElementPlus的<el-tree>组件实现树形选择功能，重点解决三个需求：1)只允许勾选叶子节点；2)实现单选模式；3)页面加载时默认选中第一个子节点。通过设置check-strictly属性允许父子节点独立勾选，利用check-change事件监听控制只能选择叶子节点并保持单选逻辑。同时给出了初始化默认选中第一个子节点的实现方法。适用于菜单选择、权限管理等业务场景，建议封装为可复用组件。文末提供了完整代码获取方式。
2025-05-29 16:31:44
2082
原创 Vue3 + 高德地图实现围栏绘制与线路渲染（含 GeoJSON 支持）
本文介绍了基于Vue3和高德地图JSAPI实现的地图功能模块开发，包含地图初始化、GeoJSON数据加载、区域围栏绘制与编辑、遮罩层渲染等核心功能。文章详细讲解了技术栈配置、地图基础设置、GeoJSON线路数据解析方法、围栏交互绘制流程，以及遮罩层实现技巧和常见层级问题解决方案。该模块适用于交通可视化、轨迹管控等场景，具有灵活扩展性，支持后续集成热力图、3D轨迹等进阶功能开发。
2025-05-28 10:34:31
1199
原创 Vue 3 实现后端 Excel 文件流导出功能（Blob 下载详解）
本文详细介绍了在Vue3项目中如何利用Axios调用后端接口处理文件流，实现Excel自动下载功能。文章首先概述了后端接口的请求方式和响应格式，接着阐述了前端实现思路，包括通过responseType: 'blob'获取流数据，创建URL链接，并使用<a>标签触发下载。此外，文章提供了完整的代码示例，涵盖了接口封装和Vue组件中的导出方法实现。最后，文章总结了常见问题及其解决方案，并展示了功能效果。通过本文，读者可以快速掌握在Vue3项目中实现Excel导出功能的技巧。
2025-05-15 13:29:57
2156
原创 全球首位AI程序员诞生，将会对程序员的影响有多大？
但同时，新的岗位可能会涌现，例如AI模型的设计、训练和优化，以及与AI系统集成和维护相关的工作。情感理解：AI程序员缺乏对情感和人类行为的理解能力。持续学习和进化：AI程序员能够不断学习和进化，通过分析大量的数据和代码，积累经验并改进自身的算法和模型，从而不断提升自身的开发能力和效率。：在AI时代，技术更新迅速，程序员应不断学习新的技术和工具，保持敏锐的观察力和学习能力，以适应行业发展的变化。：AI的发展可能改变传统的编程方式，程序员需要具备创新思维，积极探索新的编程范式和方法，以适应技术发展的需求。
2024-03-20 15:13:35
571
原创 Vue 3 + Vite 开发项目
Vue 3 + Vite 是一个新兴的、前景广泛的技术组合，它提供了更好的开发体验和更高的可维护性，并且也是现代化 Web 开发的一个优秀方案，未来也将在各种领域中得到广泛应用。更多的社区支持：由于 Vue 自身拥有强大的社区支持，并且 Vite 也已经成为了开发领域中的新秀，因此 Vue 3 + Vite 能够获得更多的支持和帮助。更好的可维护性：Vue 3 的组合式 API 和 Vite 的即时重载等功能都能够提供更好的开发体验，并能够使开发人员更轻松地维护代码。
2023-06-07 16:32:25
306
原创 Vue.js3.x新特性和相关知识
在Vue.js的进化历程中，3.x版本是一个更加现代化、更优雅、更灵活和更强大的版本。在本篇博客中，我们介绍了Vue.js3.x的新特性，例如Composition API、静态属性、emit事件等等。然而，Vue.js在其最新的版本Vue.js3.x中提供了许多新特性和改进，使得我们开发更出色的web应用程序。- 更好的响应式系统：Vue.js3.x的响应式系统也得到了改进，不仅增加了更多的API，而且还增加了对Map和Set等JavaScript内置数据结构的支持。
2023-05-06 10:49:28
289
基于 Vue3 封装大华 RTSP 回放视频组件（PlayerControl.js 实现）
2025-11-11
有沒有技术大拿 知道这个开源项目 如何将地图变成中文的
2025-04-24
vue-draggable-resizable
2025-03-31
vue中elementUi日期选择器
2024-01-15
chatgpt next web 创建自己的gpt项目
2023-07-21
vue中使用高德地图
2023-06-20
关于#数组#的问题，如何解决？
2023-01-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人