- 博客(26)
- 收藏
- 关注
RSS订阅原创 一次因 `VITE_BASE=./` 引发的 SPA 刷新白屏问题排查与解决
一次因 `VITE_BASE=./` 引发的 SPA 刷新白屏问题排查与解决
2026-04-14 14:11:53
491
原创 bpmn-js：打造高颜值流程图的自定义渲染器
本文介绍了如何利用 bpmn-js 的自定义渲染器功能，为企业级工作流应用打造高颜值流程图。通过继承 BaseRenderer 并实现关键方法，可以完全接管节点绘制过程，解决默认样式受限的问题。文章详细讲解了自定义渲染器的核心原理，包括节点配置管理、依赖注入、元素绘制判断以及核心绘制方法实现，并提供了节点类型映射逻辑的代码示例，帮助开发者实现支持丰富节点类型的个性化流程图渲染。
2026-03-25 10:20:09
426
原创 Vue 3 中优雅地集成 Video.js 播放器：从组件封装到功能定制
Vue 3 中优雅地集成 Video.js 播放器：从组件封装到功能定制
2026-03-17 17:51:29
551
原创 前端生成 PDF417 条码实践：基于 Vue 3 和 bwip-js 封装组件
本文介绍了如何在 Vue 3 项目中利用 bwip-js 库封装可复用的 PDF417 条码组件。该组件支持动态生成堆叠式条码，可自定义尺寸、颜色，并能在条码下方显示文本标签。文章详细讲解了技术选型、组件封装的核心逻辑，包括 Canvas 绘制、异步处理、数据监听等关键实现，同时提供了性能优化建议和扩展思路。通过合理的设计，该组件能灵活适应各种业务场景，如物流标签、证件条码等需求，为前端实现条码功能提供了完整解决方案。
2026-03-10 10:39:10
374
原创 Electron 介绍及基础 API
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用的框架，基于 Node.js 和 Chromium。它采用主进程（管理应用生命周期）和渲染进程（显示界面）的架构，通过 IPC 进行通信。基础 API 包括：应用生命周期管理（app 模块）、窗口控制（BrowserWindow）、进程间通信（IPC）、菜单系统（Menu）和对话框（dialog）。Electron 允许开发者使用 Web 技术开发原生应用，支持 Windows、macOS 和 Linux 平台，被
2026-01-26 14:51:36
920
原创 优化BPMN.js流程设计器：为节点和快捷面板添加Label指南
在现代业务流程建模中，BPMN.js作为一款强大的流程设计器库，被广泛应用于各种业务流程设计场景。然而，其默认界面在某些情况下可能不够直观，特别是对于新手用户。本文将详细介绍如何为BPMN.js流程设计器的节点和快捷操作面板添加文字标签(Label)，从而大幅提升用户体验和操作效率。
2025-08-22 16:50:31
1096
原创 defineAsyncComponent 加载本地 Vue 组件的异步加载 Hook (TypeScript)
问题：Vue中使用 defineAsyncComponent 加载编辑组件 但是在没加载完成时就触发编辑按钮则会报错解决：组件未加载完 编辑按钮增加loading效果。
2025-08-19 14:01:50
512
原创 在 BPMN.js 中，`minimap` 模块提供了一些控制小地图（缩略导航图）的方法和属性
在 BPMN.js 中，`minimap` 模块提供了一些控制小地图（缩略导航图）的方法和属性
2025-07-22 18:51:12
348
原创 解决 bpmn-js 无法识别 flowable:ExecutionListener 类型
在Flowable流程设计器中修改子流程XML结构时，添加flowable:ExecutionListener报错问题的解决方案。主要原因是bpmn-js未能识别该类型，需正确加载Flowable扩展。关键步骤包括：1)导入flowableModdle扩展；2)初始化模型时注入Flowable扩展；3)通过自定义方法addDefaultAttrToSubProcess为子流程添加默认属性和监听器。解决方案提供了完整的TypeScript代码示例，包括Flowable扩展的引入、模型初始化配置以及执行监听器的
2025-07-10 15:35:08
517
原创 在 bpmn-js 中，预先定义多种不同类型的 bpmn:ServiceTask，并为每种类型设置不同的属性和监听器表达式。
摘要：本文介绍了在bpmn-js中实现自定义服务任务类型的完整方案，通过delegateExpression属性区分任务类型并配置不同的监听器表达式。主要包括：(1)创建自定义工具栏生成不同类型的ServiceTask；(2)添加自定义渲染器为不同任务类型提供视觉标识；(3)注册自定义模块集成到BPMN建模器；(4)通过CSS增强可视化效果。该方案具有良好的扩展性，可轻松添加更多预定义任务类型，适用于需要区分多种业务场景的流程建模需求。
2025-07-05 14:54:17
462
原创 在 bpmn-js 中常见的节点事件类型及其用途
摘要：bpmn-js 提供了丰富的事件监听机制，包括通用节点交互事件（如 element.click、element.hover）、BPMN模型变更事件（如 shape.added、connection.removed）以及任务/子流程相关事件（如 task.complete）。通过 eventBus 可监听这些事件，并通过检查 element.type 实现特定节点类型的操作。示例代码展示了如何监听点击、悬停和新增节点事件，开发者可根据业务需求灵活使用这些事件构建交互式流程设计器。
2025-07-02 16:52:49
552
原创 Vue 3 + Ant Design Vue 使用 Tree 组件 父子节点解耦
Vue 3 + Ant Design Vue 使用 Tree 组件 父子节点解耦
2025-06-20 09:24:42
442
原创 client page offset screen
clientHeight：该元素对象的上内边框到下内边框的距离，不包含border；clientWidth：该元素对象的左内边框到右内边框的距离，不包含border；offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框水平坐标；offsetY：当事件被触发时鼠标指针相对于所触发的标签元素的上内边框垂直坐标；offsetHeight：该元素上外边框到下外边框的距离，包含border；offsetWidth：该元素左外边框到右外边框的距离，包含border；
2025-02-13 11:28:24
353
原创 前端元素居中问题(水平居中/垂直居中/水平垂直居中)
1.内联元素水平居中如果被设置元素为文本，图片等行内元素时，水平居中是通过给父元素设置text-align：center 来实现的。2.定宽块状元素水平居中满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中 （margin:0 auto）。注：当元素设置浮动（float），absolute，fixed后，左右margin为auto将会失效。3.不定宽块状元素水平居中；方案一：父元素{text-align:center;}子元素 {display:
2025-02-12 15:53:37
478
1
原创 vben-admin中实现pdf/pptx/excel/word文件在线预览
在vben-admin中借助第三方插件实现office文件在线预览(pdf/word/excel/pptx)参考地址：https://www.npmjs.com/package/@vue-office/excel
2025-02-11 11:24:24
667
原创 input只允许输入数字 禁止输入e + - 以及取消input加减箭头样式
input设置type=number限制用户只允许输入数字 但仍可输入e , + , -
2020-07-14 23:00:16
2808
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人