- 博客(12)
- 收藏
- 关注
RSS订阅原创 VUE模拟随机属性生成
摘要 本文介绍了一个基于Vue的随机属性生成系统。通过点击按钮，每次随机生成3条不同等级和数值的属性，并实时更新角色属性面板。系统包含： Vue组件：使用<el-button>触发随机生成，通过makeAttribute()方法生成随机属性，并计算属性加成效果 属性配置：定义10个等级（1-10级）及对应颜色，7种属性类型（HP、MP等）及其数值范围 效果展示：生成的属性按等级显示不同颜色，并动态影响角色基础属性（如"ll"属性会增加攻击力） 该系统适用于游戏开发中的随机装备
2025-09-23 17:39:19
220
原创 vue3模拟人物在地图上移动
本文介绍了如何使用Vue3实现一个基于键盘控制的地图导航系统。地图由30x30个方格组成，每个方格尺寸为50x50像素。关键实现包括：1) 通过样式绑定动态计算地图容器和角色位置；2) 使用computed属性实时计算地图偏移量，保持角色始终居中显示；3) 通过键盘事件监听实现角色移动控制，并加入节流优化性能；4) 响应式处理窗口大小变化。系统还预留了3D变换接口，transformOrigin属性为后续3D效果实现做准备。整体实现了地图渲染、角色移动和视窗跟随等核心功能。
2025-09-23 17:18:22
345
原创 纯CSS实现旋转魔方
摘要：本文展示了一个纯CSS实现的3D旋转魔方效果。通过CSS3的3D变换属性（transform-style: preserve-3d）和透视效果（perspective），构建了一个由6个面组成的3D立方体，每个面包含3x3的小方块。利用@keyframes动画使魔方持续旋转，展示了CSS在3D效果上的强大能力。代码简洁，无需JavaScript即可实现流畅的3D动画效果。（149字）
2025-09-16 09:10:21
218
原创 纯CSS实现chrome logo
本文介绍如何使用纯CSS实现Chrome浏览器logo。核心是使用clip-path: polygon创建扇形区域，通过三个旋转120度的彩色扇形（红、黄、绿）组合成logo主体，中间添加蓝色圆形完成设计。代码设置了200x200px的圆形容器，利用绝对定位和旋转变换精准控制每个扇形的位置和角度，最终呈现标准的Chrome logo视觉效果。这种方法无需图片，完全通过CSS属性实现，展示了CSS图形绘制的强大能力。
2025-09-04 15:15:56
359
原创 使用CodeMirror实现自定义plantuml语法高亮以及VScode dark主题
本文介绍了在Vue3项目中集成CodeMirror并实现PlantUML语法高亮的方法。主要内容包括：1) 定义PlantUML自定义模式，包含边界标记、关键字、函数、颜色等语法元素的识别规则；2) 实现语法高亮逻辑，包括注释、字符串、数字、操作符等不同元素的样式处理；3) 采用VS Code深色主题风格的配色方案，为各类语法元素配置相应颜色。该方案通过定义自定义模式和CSS样式，实现了完整的PlantUML语法高亮功能，支持括号匹配、多行注释等特性，并提供与VS Code一致的视觉体验。
2025-08-29 14:55:11
314
原创 graph数据展示利器relation-graph
本文介绍了在Vue3项目中如何使用relation-graph-vue3组件实现关系图展示。首先通过npm安装依赖，然后在模板中创建全屏容器并配置关系图组件。代码演示了如何定义节点和连线数据，以及通过选项面板动态切换线条形状（直线、曲线、折线等）。组件提供了中心布局、自动居中、缩放适应等功能，并通过CSS动画实现了连线流动效果。文章还展示了如何通过ref获取组件实例进行数据加载和视图调整，以及添加自定义控制面板的完整实现。
2025-08-22 10:10:23
354
原创 Electron自定义导航栏
electron默认使用系统自带的导航栏，对于有UI定制需求的产品，需要自定义开发；实现的功能包括title展示、最大化最小化、调整大小、拖拽位置等等；
2024-07-05 10:22:27
1458
原创 Electron手写自动升级模块
electron主进程负责设置下载目录，下载，获取下载进度，安装；渲染进程负责检查更新，展示更新界面，调用下载，显示下载进度，调用安装；
2024-07-04 14:23:37
331
原创 无界(wujie)微前端集成react和vue3实战
管理后台项目，前端使用react+antd开发，新框架选型smartadmin vue3，技术方案为使用前端微服务集成两个项目，主应用为vue3，子应用为react；前端微服务框架目前主流的有qiankun，wujie，MicroApp，推荐排名（引用大佬的图片）如下：选用无界的原因：1.对子应用侵入少；2.接入成本较低；3.官方文档和示例很棒；1.判断是否是子应用运行环境并隐藏菜单栏和导航栏，具体效果通过isSubapp控制；
2024-06-30 11:27:40
2593
原创 react antdesign table组件翻页后selectRows丢失的问题
出现的原因为，table组件仅持有了selectedRowKeys，selectRows则通过selectedRowKeys去table数据查找，其他页的数据丢失查找不到，则返回undefined。关闭modal后再次打开modal回显选中的数据，此时再次选择数据会丢失其他页的数据，表现为其他页的selectRows为undefined，rowSelection新增preserveSelectedRowKeys: true解决。
2024-04-17 11:40:38
845
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人