- 博客(73)
- 收藏
- 关注
RSS订阅原创 vue3.2 + echarts5.6 + ant-design-vue 3.x 实现自定义 echarts 图例
本文介绍了自定义图例组件的开发实现，主要包含以下内容： 需求背景：需要实现图例移入显示描述说明的功能 技术实现： 使用Vue 3的Composition API开发可复用的Legend组件 支持传入ECharts实例和自定义提示文本 实现图例项的点击切换功能（显示/隐藏对应数据系列） 添加鼠标悬停Tooltip显示详细描述 提供禁用状态下的视觉样式变化 组件特点： 自动适配折线图和饼图的数据结构 响应式同步图表和图例状态 支持多图表实例复用 提供平滑的交互动画效果 该自定义图例组件通过解耦图表实例，实现了更
2025-07-25 11:23:11
173
原创 vue2 简易图片预览组件
这是一段实现图片预览功能的Vue组件代码，主要功能包括：图片显示、缩放（滚轮/按钮控制）、平移拖拽和关闭预览。组件使用固定定位覆盖全屏，支持响应式布局和触摸屏操作，包含动画过渡效果。代码结构清晰，分为模板、脚本和样式三部分，实现了图片加载处理、缩放控制、拖拽交互等核心功能，并考虑了移动端和桌面端的兼容性。
2025-07-15 13:28:49
220
原创 vue3.2 前端动态分页算法
本文介绍了前端根据数据量动态分页的实现方案。系统通过判断数据总量是否超出固定页面高度(540px)来决定是否需要分页，并根据不同页数类型(首页/中间页/尾页)采用差异化的页面布局：首页包含头部和尾部，中间页仅显示内容，尾页包含统计信息和尾部。核心实现包括数据分页计算、DOM高度检测和递归处理剩余数据，最终通过Vue组件动态渲染不同页面的布局。作者尝试AI方案未果后，自行开发了该解决方案，并提供了完整代码示例和效果展示。
2025-07-09 16:37:26
363
原创 vue 3.2 ECharts 世界地图飞线图基础版实现指南
本文介绍了使用ECharts在Vue3中实现世界地图飞线图的方法。通过加载世界地图JSON数据，配置地理坐标系和飞线效果，展示从中国到多个国家的地理数据流向。关键技术包括：1)注册地图数据；2)设置飞线数据源和节点样式；3)配置交互式提示和视觉特效。代码示例展示了完整的实现过程，包括地图背景、飞线动画和节点散点效果，适用于展示航班、贸易等方向性数据。
2025-07-07 14:46:30
266
原创 前端开发 + Vue 2 + 卡片拖拽（带坐标系、左右互拖、多卡同容器）+ 学习参考
内容概要：本资源是基于 Vue 2 实现的卡片拖拽演示项目，深度融合坐标系机制，实现了左侧卡片区与右侧表格区的双向拖拽交互，同时支持卡片区内多卡片同容器操作。通过精准的坐标系计算，细腻地控制卡片的拖拽、定位与布局，直观呈现 Vue 2 框架下复杂交互的实现逻辑。适用人群：有 Vue 2 基础，想深入学习前端拖拽交互、坐标系应用的开发者；需在项目中集成类似功能的前端工程师；对前端交互效果实现感兴趣的技术爱好者。使用场景及目标：适用于个人技术学习、团队开发分享或项目功能预研场景。
2025-04-17 17:40:08
508
原创 Uniapp Vue 实现当前日期到给定日期的倒计时组件开发
在移动端应用开发中，倒计时功能是常见的交互需求，例如限时促销活动、订单超时提醒、考试倒计时等场景。本文将基于 Uniapp 框架，实现一个从当前日期到给定日期的倒计时组件，支持显示 HH:mm:ss 格式的剩余时间，并具备自动更新和资源释放机制。
2025-04-11 13:39:57
483
原创 CSS学习02 动态列数表格开发，解决多组数据布局与边框重合问题
在前端开发中，表格常用于展示结构化数据。当数据组的字段数量不统一时（如有的行包含 3 组数据，有的行包含 2 组或 1 组），传统固定列数的表格会出现结构错位、边框重合等问题。本文通过 HTML/CSS 规范方法，实现灵活适应不同数据组数的表格布局，确保视觉一致性和结构完整性。通过 HTML 表格的 colspan（跨列）属性动态调整列数，结合 CSS 的 border-collapse 合并边框，实现灵活且规范的表格布局。
2025-04-11 13:19:37
340
原创 CSS 学习01 定位、阴影与伪元素
通过这个案例，我们不仅实现了一个美观的按钮组件，更系统练习了 CSS 定位、盒模型、伪元素、过渡效果等核心技能。建议读者亲手敲代码并不断修改参数，观察样式变化规律，这是掌握 CSS 视觉设计的关键方法。
2025-04-11 10:28:16
555
原创 vxe-table4.6 + vue3.2 + ant-design-vue 3.x 实现对列的显示、隐藏、排序
vxe-table中的vxe-toolbar没有拖拽功能，故自己实现。
2025-04-10 17:18:36
310
原创 vue3.2 + vxetable4.6 + sortablejs 实现table和卡片之间的拖拽
在使用 SortableJS 库时，默认情况下，你不能直接在元素类型之间拖拽。SortableJS 设计为在同一类型的元素列表中拖拽。如果你想在不同的元素类型之间拖拽，例如从一个列表拖拽到另一个列表，或者从一个表格拖拽到另一个表格的不同行或列，你需要采取一些额外的步骤来实现这一功能。
2025-04-10 14:48:08
590
原创 vue3.2 +vxetable4.6 渲染大数据列，出现错乱问题处理方案
requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘，让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。在vue项目中，有时候需要渲染大量的动态列，在我的项目中当我的列达到150个以上时，出现了列错乱问题，以下是我的示例截图。这个是在之前做动画的时候用过，抱着试试的心态，我修改了一下我的代码发现可以！
2025-04-09 11:35:42
465
原创 vue + uniapp 实现仿百度地图/高德地图/美团/支付宝 滑动面板 纯css 实现
使用百度地图、各种单车APP时，对地图上的滑动面板很感兴趣，于是根据自己的理解实现了一下。之前用的js实现，滑动的时候没有原生好。这一次用的css实现。
2025-04-09 10:46:10
867
2
原创 vue3.2 + vxetable + load_es 实现展开、收起、合并功能 优化
【代码】vue3.2 + vxetable + load_es 实现展开、收起、合并功能 优化。
2025-02-27 16:59:16
146
原创 vue3.2 + vxe-table4.x 实现多层级结构的 合并、 展开、收起 功能
【代码】vue3.2 + vxe-table4.x 实现多层级结构的 合并、 展开、收起 功能。
2025-02-27 14:50:08
334
原创 vue + uniapp + 高德地图实现微信小程序地图polyline、marker展示
【代码】vue + uniapp + 高德地图实现微信小程序地图polyline、marker展示。
2025-02-18 17:04:46
596
原创 记录 uniapp + uview 实现 h5 / app-plus 上传图片前端校验图片中的二维码，有缺陷偶尔识别不出来
【代码】记录 uniapp + uview 实现 h5 / app-plus 上传图片前端校验图片中的二维码，有缺陷偶尔识别不出来。
2024-10-29 09:35:02
189
原创 vue 2.0 使用 html2canvas + jspdf +ant-design-vue 1.x + echarts + 高德地图 导出数据报告
【代码】vue 2.0 使用 html2canvas + jspdf +ant-design-vue 1.x + echarts + 高德地图 导出数据报告。
2024-10-12 11:29:05
355
原创 vue3.x + echarts 5.x + ant-design-vue 4.x + monaco-editor v3 新增版本切换功能
【代码】vue3.x + echarts 5.x + ant-design-vue 4.x + monaco-editor v3 新增版本切换功能。
2024-05-10 11:48:46
410
原创 vue3.x + echarts 5.x + ant-design-vue 4.x + monaco-editor v3 实现 官网echarts在线编辑器效果
VMonacoEditor 组件。echarts 官网在线编辑器。
2024-05-10 10:27:32
657
原创 记录 vue create 《项目名》 + yarn 创建 vue 3 项目 使用 Monaco-editor 中的坑
【代码】记录 vue create 《项目名》 + yarn 创建 vue 3 项目 使用 Monaco-editor 中的坑。
2024-05-09 16:56:07
286
原创 vue 2.x 大屏自适应组件（摘录 https://gitee.com/zhangfucheng197/large-screen/tree/master/）
vue2.x 大屏自适应组件，找了很久，发现这个可以完美解决我的我问题。
2024-05-08 11:02:01
329
原创 vue2.x + echarts 5.x 实现环形利用率（有缺陷 不能实现小数和分配不均的情况，在此只做记录）
【代码】vue2.x + echarts 5.x 实现环形利用率（有缺陷 不能实现小数和分配不均的情况，在此只做记录）
2024-05-07 14:29:23
189
原创 vue 3.2 + sv-table（二次封装vxe，使用将 sv 替换为 vxe 即可） 合并功能
【代码】vue 3.2 + sv-table（二次封装vxe，使用将 sv 替换为 vxe 即可） 合并功能。
2024-04-11 16:23:23
278
前端开发 + Vue3.2/xlsx + 多格式文件预览组件（图片 / PDF/Excel）+ 企业级应用内文件在线查看
2025-07-10
前端开发 + Vue 2 + 卡片拖拽（带坐标系、左右互拖、多卡同容器）+ 学习参考
2025-04-17
JavaScript 实现的 网页购物车功能
2025-04-11
uniapp中使用ucharts实现图表功能
2025-04-02
前端开发中国地图资源China.json
2024-03-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人