- 博客(68)
- 收藏
- 关注
RSS订阅原创 企业微信接入自定义系统（Java+Vue3）实现共享文档创建与数据统计
本文介绍了基于Java+Vue3技术栈实现企业微信接入自定义系统的方案，主要包含企业微信应用配置、后端接口开发和前端页面开发三部分。后端使用SpringBoot实现文档创建、数据统计等核心功能，包括获取access_token、调用企业微信API创建共享文档，以及统计文档数量和类型分布。前端采用Vue3+ElementPlus开发交互界面，支持文档创建和数据可视化展示。文章还提供了部署步骤和注意事项，强调access_token缓存、权限管理和生产环境安全等关键点，并建议扩展文档同步、权限管理等附加功能。
2025-12-11 12:38:55
1432
原创 Vue3 + Element Plus 动态表格高度自适应方案详解
本文介绍了一种智能自适应表格高度解决方案，针对后台管理系统中的表格组件在不同分辨率下的显示问题。该方案通过实时计算窗口可用高度，自动调整表格显示区域，支持全屏模式切换和响应式布局。核心实现包括：基于组件高度的动态计算逻辑、全屏状态检测机制、ResizeObserver监听组件尺寸变化，并确保最小高度保护。文章详细讲解了技术实现原理、Vue组件集成方法、配置参数说明以及常见问题解决方案，可显著提升管理系统在多设备环境下的表格显示效果和用户体验。
2025-12-09 15:22:26
341
原创 大屏ECharts适配完整方案
本文提出了一套完整的ECharts大屏可视化适配方案，主要包括：1）采用多层级响应式架构，包含应用场景识别、容器管理、配置计算和渲染优化四层；2）实现核心响应式基类，通过双重监听机制（ResizeObserver+window.resize）、防抖节流优化和智能比例计算实现自适应；3）提供图表类型适配器实现细节优化；4）封装可复用的Vue组件，支持断点响应、全屏展示等交互功能。该方案通过基准设计稿等比缩放、按需渲染策略和性能监控等手段，在保证视觉一致性的同时优化了渲染性能，适用于各类大屏可视化场景。
2025-12-03 14:47:56
376
原创 大屏ECharts适配方案 - 面试回答指南
大屏ECharts适配的核心在于建立多层响应机制，主要包括容器级适配、双重监听机制和动态配置优化。容器层面采用百分比布局配合最小尺寸限制，通过ResizeObserver和防抖处理的window.resize实现双重监听。图表配置根据容器宽度动态计算字体大小、内边距等参数，并对数据密度和标签显示进行优化。针对特殊场景，使用rem/vw单位实现多屏适配，并通过requestAnimationFrame等技术优化重绘性能。整体方案遵循多层监听、智能计算和性能优先三大原则，确保图表在不同尺寸下都能保持良好视觉效果
2025-12-03 14:38:35
371
原创 Echarts适配方式总结与原理分析
本文总结了图表容器的五种适配方法：1）百分比响应式布局；2）ResizeObserver监听容器变化；3）窗口resize事件防抖处理；4）参数化配置；5）延时重绘策略。重点阐述了多维度响应监听原理、防抖优化机制和百分比布局实现方式，通过ResizeObserver与window.resize双重监听确保全面覆盖尺寸变化场景。方案采用异步执行和配置驱动设计，具有高精度响应、性能优化和灵活适配等优势，有效解决了图表在不同容器中的自适应显示问题。
2025-12-03 14:35:28
389
原创 实现一个左右树形结构一对一关联的组件。这个方案使用两个el-tree组件，并实现它们之间的互相关联选择。
本文介绍了一个Vue.js双树关联组件，支持在左右两棵树之间建立节点关联。组件核心功能包括：1. 可视化展示两棵树结构；2. 通过按钮实现节点关联/解除操作；3. 实时显示已建立的关联关系；4. 提供完整的API接口（props/events/methods）。该组件具有响应式更新、类型安全、完全可复用等特点，适用于部门-负责人等关联场景，支持双向数据绑定和自定义样式。组件通过Element Plus实现UI，包含完善的交互提示和状态管理功能。
2025-12-03 11:28:17
1030
原创 数字孪生深度长文学习
数字孪生是一种通过实时数据映射和仿真，在虚拟空间创建物理实体动态镜像的技术。其核心特征包括虚实映射、实时同步、深度仿真和闭环优化，区别于传统3D模型和仿真技术。技术架构包含数据采集、传输集成、建模、功能服务和交互应用五个层次。当前主要应用于智能制造、智慧城市、医疗健康等领域，面临数据集成、成本和安全等挑战。未来将与AI深度融合，向低代码化、系统级孪生方向发展，成为构建产业元宇宙的重要基石。数字孪生正在推动企业数字化转型和产业智能化升级。
2025-10-29 16:30:34
1085
原创 Vue3 新特性全面解析 - 颠覆性的性能与开发体验升级
Vue 3核心特性概览 Vue 3进行了全方位的架构升级，主要包括：1）响应式系统改用Proxy实现，全面支持深层嵌套属性、数组索引操作等；2）编译时优化引入PatchFlag标记，实现精准DOM更新；3）组合式API（Composition API）提供更灵活的逻辑复用方式；4）新增碎片(Fragments)、Teleport等组件特性；5）改进TypeScript支持，提供完整类型推断；6）构建工具集成Vite，支持Tree-shaking优化。这些改进使Vue 3在性能、开发体验和可维护性方面显著提升
2025-10-29 16:03:26
499
原创 Vue3 Composables 全面使用指南 - 现代化逻辑复用方案
Vue3 Composables 是 Composition API 提供的一种逻辑复用方案，类似 React Hooks。文章展示了多种实用 Composable 的实现：1) 状态管理类的计数器、本地存储；2) UI 交互类的模态框、下拉菜单；3) 数据获取类的通用请求与增强 API；4) 工具类的防抖、响应式断点。这些 Composables 遵循 use 前缀命名规范，支持 TypeScript，返回响应式数据和方法。通过组合使用（如用户认证模块）可提高代码复用性、改善组织方式、增强类型安全并便于测
2025-10-29 15:39:45
664
原创 Vue3 Hooks 全面使用指南 - 替代 Mixins 的现代化方案
Vue3 Hooks是基于Composition API的逻辑复用工具，通过封装可复用的状态逻辑提高代码组织性和可维护性。文章介绍了Hooks的核心优势：避免命名冲突、改善代码组织、增强类型推断和测试友好性。提供了多个实用Hook示例，包括计数器(useCounter)、鼠标追踪(useMouse)、数据请求(useFetch/useApi)、本地存储(useLocalStorage)、主题切换(useTheme)和表单处理(useForm)等。还讲解了如何组合多个Hooks(如useUserProfile
2025-10-29 15:25:01
745
原创 Vue3 全面学习指南 - 从入门到实战
Vue3核心开发指南摘要：Vue3带来了显著性能提升和新特性，包括Composition API、Proxy响应式系统和更好的TypeScript支持。通过Vite可快速创建项目，采用模块化结构组织代码。核心开发包含组件系统、路由管理(Vue Router4)和状态管理(Pinia)，并介绍了生命周期、计算属性与侦听器等关键功能。最佳实践建议合理组织代码结构，注意性能优化。Vue3通过组合式API提供了更灵活的逻辑复用方式，配合TypeScript支持，显著提升了开发体验。本文档系统梳理了Vue3开发的核心
2025-10-29 15:11:05
458
原创 ECharts GL 3D饼图组件深度解析：从数学原理到工程实践
摘要：本文深入解析了一个基于EChartsGL的3D饼图Vue组件(pie3D.vue)，该组件通过参数方程和WebGL技术实现了真正的三维渲染效果。文章详细介绍了其核心数学原理（参数方程建模）、技术实现（包括3D坐标变换、系列数据生成算法）以及性能优化策略（内存管理、智能重渲染等）。该组件具有丰富的交互功能、完整的3D场景构建和响应式设计，适用于数据可视化和仪表盘展示等场景。文中还提供了最佳实践建议、使用示例和故障排除指南，展示了如何将数学理论与前端技术相结合，创造出高性能的3D数据可视化解决方案。
2025-10-28 16:39:11
654
原创 ECharts 3D柱状图与折线图混合组件开发实战：BarLine3D.vue 深度解析
是一个功能强大的混合图表组件，它巧妙地将3D立体柱状图与面积折线图结合在一起，适用于需要同时展示两种不同类型数据的场景。这种组合图表在业务监控、数据分析等场景中具有重要价值。组件展示了如何在前端项目中实现复杂的混合图表需求。通过结合3D柱状图和折线图，该组件能够同时展示两种不同类型的数据趋势，为用户提供更丰富的数据洞察。技术亮点创新的3D图形自定义实现智能的坐标轴计算算法现代化的响应式布局方案完善的性能优化和内存管理适用场景业务指标监控面板数据对比分析报告实时性能监控系统多维度数据可视化。
2025-10-28 16:28:54
461
原创 ECharts 3D立体柱状图组件开发全解析：Bar3D_2.vue 深度剖析
/ 定义3D立方体形状参数// X轴偏移量// Y轴偏移量// 柱状图宽度// 左侧面定义});});return str;组件展示了如何利用 ECharts 的自定义图形功能和 Vue 3 的响应式系统，构建出功能丰富、性能优异的3D数据可视化组件。通过合理的架构设计和细致的性能优化，该组件既满足了美观的视觉需求，又保证了良好的用户体验。技术深度：深入使用 ECharts 高级特性工程化思维。
2025-10-28 16:20:43
595
原创 ECharts 3D柱状图组件开发实战：Bar3D.vue 完整解析
本文介绍了一个基于Vue3和ECharts开发的3D柱状图组件Bar3D.vue，该组件具有立体视觉效果、丰富交互功能和高度可定制性。文章详细解析了组件的核心实现，包括参数定义、颜色配置系统、数据处理逻辑和3D效果实现原理（通过多层图形叠加）。组件支持响应式设计、性能优化和样式定制，提供了最佳实践建议。技术亮点包括监听数据变化、防抖resize处理和自适应布局。该组件展示了如何将ECharts与Vue3结合创建专业可视化组件，具有复用性、一致性和可维护性优势。
2025-10-28 16:08:29
485
原创 前端工具函数库：路径匹配、URL验证与数值格式化完全指南
本文介绍了一套实用的前端工具函数库，包含三大核心功能：1.路径匹配器：支持通配符路径匹配，可区分单级(*)、多级(**)，并精确匹配边界；2.数据验证器：提供URL、邮箱、用户名等格式验证，以及类型判断函数；3.数值格式化工具：支持无效值处理、千分位分隔、小数位控制及单位拼接（自动处理百分比转换）。该工具库具有功能全面、健壮性强、使用简便等特点，适用于路由权限控制、表单验证、数据展示等多种场景，能显著提升代码质量和开发效率。
2025-10-28 15:51:04
324
原创 Vue 3 + Element Plus 动态表格高度自适应方案详解
本文介绍了基于Vue3和ElementPlus的表格动态高度自适应方案。针对传统表格高度设置方式（固定高度、百分比高度、最大高度）的不足，提出通过ResizeObserver API监听DOM元素尺寸变化，结合Composition API实现响应式计算的解决方案。核心实现包括：计算可用高度（窗口高度减去搜索区、表头、分页区等高度）、设置尺寸监听器、处理窗口变化事件。该方案具有响应式、智能、易用等特点，支持自定义偏移量，能适应各种屏幕尺寸和页面布局变化，显著提升用户体验。文章还提供了完整代码实现和注意事项，
2025-10-28 15:42:41
1072
原创 Vue 3 + Element Plus 表格操作封装：useTableOperations 组合式函数详解
本文介绍了一个基于Vue3和ElementPlus的可复用组合式函数useTableOperations，用于快速实现中后台管理系统中的表格通用功能。该函数封装了表格增删改查、导入导出、批量操作等核心功能，支持动态高度适配、表单校验等特性。文章详细说明了函数的设计思路、类型定义、状态管理和使用方法，并提供了完整的代码示例。通过这个高度可配置的组合式函数，开发者可以显著提升表格页面的开发效率，同时保持良好的类型支持和扩展性。
2025-10-28 15:34:46
455
原创 Vue 3 + Element Plus 动态通用表单组件设计与实现
本文介绍了如何使用Vue3和ElementPlus构建一个功能强大的动态表单组件。该组件支持多种表单字段类型（如文本输入、数字输入、日期选择、单选框等），具有高度可配置性、灵活验证功能和响应式布局。通过JSON配置即可生成表单，减少重复代码，提高开发效率。文章详细讲解了组件的模板结构、属性定义、响应式数据处理方法，并提供了使用示例。该组件能有效统一项目表单风格，简化表单开发流程，同时保持高度的灵活性和可扩展性。
2025-10-28 15:07:07
713
原创 Vue+Element Plus 表格工具栏组件：动态按钮 + 搜索控制的优雅实现
本文介绍了一个基于Vue3+TypeScript+ElementPlus的可复用表格工具栏组件方案。该组件通过动态配置按钮列表、内置权限控制、统一搜索状态管理等功能，解决了传统开发中代码冗余、权限耦合等问题。文章详细解析了组件的模板结构、脚本逻辑和类型定义，并提供了具体的使用示例和配置说明。组件支持栅格布局、动态按钮渲染和权限校验，同时通过事件机制与父组件通信。最后还给出了功能扩展建议和常见问题解决方案，帮助开发者快速集成到项目中，提升中后台系统表格页面的开发效率。
2025-10-28 14:51:35
901
原创 基于 Element Plus 的 TableColumnGroup 组件使用说明
本文介绍了一款基于ElementPlus封装的TableColumnGroup组件，专为处理复杂表格需求设计。该组件支持多级嵌套表头、自定义渲染、条件渲染等功能，提供灵活的列配置选项。通过示例代码展示了基础使用、嵌套列组、自定义渲染和条件渲染等场景的用法。组件内置了数字格式化功能，支持样式自定义，能够有效简化复杂表格的实现过程。该方案特别适合需要展示多层级数据结构的业务场景，提高了前端开发效率。
2025-10-28 14:37:35
1128
原创 使用 Python 和 Tkinter 开发 CSV 转 TXT 工具并添加加密与许可证管理功能
通过使用 Python 及其相关库，我们开发了一个功能丰富的 CSV 转 TXT 工具，包括用户友好的 GUI 界面、数据处理、加密和许可证管理功能。通过。
2025-01-15 11:16:59
807
原创 VUE2中ECharts提示框tooltip自动切换
近期使用VUE开发的数据大屏统计，又需要将 echarts的提示框 tooltip 实现自动切换，网上有个很简单的插件（echarts-tooltip-auto-show），使用教程简单分享给大家。自动每隔几秒切换tooltip，鼠标移入则停止并展示当前鼠标所指向的提示框。效果如下图所示插件git：https://gitee.com/bubunuo/echarts-tooltip-auto-show。
2024-10-30 09:23:01
772
原创 Vue3利用缩放进行屏幕分辨率适配的解决方案讲解
本文将介绍一个 Vue 3 组件，可以在浏览器窗口大小发生变化时自动调整其缩放比例和高度。这个组件的核心目标是使组件的内容在不同设备上看起来一致，无论设备的屏幕大小如何变化。
2024-10-29 17:27:55
832
原创 el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）
prop的绑定就有上文提到的这两种方式，因此不管是几重数组都是可以的（当然没有试过三重四重数组， 应该是可以的，当然项目中应该不会出现这种情况）
2024-01-11 10:18:33
823
原创 使用全局方式导入所有的过滤器
1、在 filters/index.js 中导出方法。2、在 main.js 中统一注册过滤器。3、在组件中使用过滤器。
2023-12-03 17:28:18
595
原创 el-input 使用 回车键会刷新页面的问题
使用el-input的时候，光标聚焦在输入框，按下回车，会刷新页面。这是因为当el-form表单中只有一个input时，按下回车建会自动触发页面的提交功能， 产生刷新页面的行为。如下代码，在 el-form 中 加个 @submit.native.prevent，就可以了，form表单内多增加一个元素，不占据位置即可。.prevent 提交以后不刷新页面。.native 绑定系统原生事件。@submit: 表单提交。
2023-08-14 14:55:27
1880
原创 Vue实战开发（一）验证码与登录页面
这里主要是页面刷新的方法，验证码的验证之类的，还有就是相关的变量的绑定，还是比较重要的。这个组建的话其实也是从网上搞过来的，很多而且都叫一个名字。直接看代码即可，是直接使用element ui 来做的。这里的话就不像其他教程那样了，老卖关子，样式都不给。你把这个复制下来就好了，然后放到制定的文件内。现在的话我们需要在登录界面使用这个组件。在需要的位置放入组件即可。
2023-06-15 14:14:30
738
原创 解决 “element分页：删除最后一页的所有数据后，currentPage显示正确，但列表内容为空” 的问题
当表格有多页数据，并且末尾页只有一条数据时，删除末尾页的数据之后，数据列表为空，但是当前页码显示正确，还是直接上图说明吧。我怎么传的是11呢？删除后得想办法及时更新掉page的值，再去请求列表数据。删除之后页码定位到第10页是没有问题，但是之前第10页有数据，为什么现在列表数据空了呢？删除之后的现象，如图。
2023-04-20 14:24:37
424
原创 关于el-input的多行文本框textarea固定多行不可拖拽
的textarea属性下的多行文本框，我真是用一次讨厌一次，我也不知道为什么每次那个autosize的属性用着没效果，rows也是没有用，怎么都是一行，真是烦的我（后面有时间我得去看看是为什么了）。将:resize属性设置为none，不可拖拽，同时:autosize=设置成自己想要的行数。因为我试了一下没有效果，组合:resize没有效果，单独用也没有效果。不要问我问什么不使用:rows=“4”，所以就是要按上面那样这么设置了。
2023-04-12 08:58:26
4283
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人