- 博客(121)
- 收藏
- 关注
RSS订阅原创 前端判断文本是否溢出：单行与多行场景的完整解析
本文系统总结了前端开发中判断文本溢出的解决方案。对于单行文本，通过比较容器的scrollWidth和clientWidth即可准确判断；多行文本则需测量实际高度与限制高度，或利用-webkit-line-clamp特性。文章澄清了常见误区，如不应依赖子元素尺寸判断，并针对Flex布局等特殊场景提供了解决方案。最佳实践建议优先使用容器自身属性判断，必要时克隆节点需同步所有文本样式。通过深入理解盒模型和布局机制，开发者可以在各种场景下高效实现文本溢出检测，优化用户体验。
2026-02-13 16:30:51
622
原创 viepress:vue组件展示和源码功能
本文介绍了使用VitePress实现Vue组件展示和源码功能的方法。首先配置了侧边栏和导航栏结构，将组件文档分为引入、使用和预览三部分。然后通过集成@vitepress-demo-preview和vitepress-script-preview等插件，实现了组件预览功能。最后展示了在Markdown中使用:::preview块实现组件交互的示例。整套方案为技术文档提供了完善的组件展示和源码查看功能。
2026-02-08 17:28:39
79
原创 码云流水线前端资源传输至目标服务器
摘要 本文介绍了前端资源部署到Windows和Linux服务器的自动化脚本方案。Windows端使用bat脚本，包含下载压缩包、解压到临时目录、移动文件到生产目录等步骤；Linux端采用shell脚本，通过环境变量配置路径，实现文件下载、解压和部署到指定目录的功能。两种方案都包含清理临时文件的步骤，为前端自动化部署提供了可参考的实现示例。
2026-02-03 17:32:11
98
原创 Vue3+TinyMCE 富文本编辑器从零配置指南
TinyMCE富文本编辑器在Vue项目中的自托管配置指南 本指南详细介绍了如何在Vue3项目中配置自托管版TinyMCE富文本编辑器。首先需要从官网下载静态资源文件，包括语言包和皮肤文件，并放置在public目录下。然后安装tinymce和tinymce-vue依赖包，创建一个可复用的Vue组件封装编辑器功能。组件实现了中文语言支持、常用插件加载、图片上传处理等核心功能，并通过v-model实现双向数据绑定。最后展示了如何在父组件中使用该编辑器组件，包括内容变更监听和内容获取等操作。整个配置过程注重资源路径
2026-01-16 17:33:21
850
原创 vue项目从零开始配置国际化
本文介绍了基于Vue3+Element Plus的国际化(i18n)配置方案。主要内容包括：1) 使用vue-i18n创建多语言实例，支持中/英/泰三语切换；2) 通过ElConfigProvider实现Element UI组件的本地化；3) 实际项目中的优化方案，如动态加载语言文件、关联i18n.glob属性等。文章提供了从基础配置到项目实战的完整指南，包括语言切换UI实现、状态管理以及测试验证方法。
2026-01-14 17:23:40
827
原创 Vue页面布局与路由映射实战：RouterView嵌套及动态组件生成详解
本文介绍了前端布局组件与路由管理的实现方式。布局组件作为应用顶层容器，通过RouterView动态渲染内容，保持界面一致性。路由分为静态和动态两种：静态路由预定义路径和组件；动态路由通过接口数据或逻辑生成，支持权限控制和菜单扩展。文章详细说明了动态路由的加载机制，包括路径匹配规则和组件动态导入过程，强调文件命名规范的重要性。这种设计提升了代码灵活性和可维护性，适用于需要权限管理等复杂场景的前端应用。
2026-01-13 17:56:53
487
原创 Vue3国际化实战：动态加载语言包与Element Plus组件集成分步指南
本文介绍了Vue国际化(i18n)的实现方案，主要包括以下核心内容： 初始化vue-i18n实例并挂载到Vue应用 动态加载语言包机制，通过import()按需加载语言文件 配置语言选项，包括当前语言、回退语言和翻译内容 使用Pinia Store管理语言状态并持久化到localStorage 实现动态语言切换功能，包括检查加载状态和更新视图 同步Element Plus组件国际化配置 自动更新HTML的lang属性 关键实现点：动态语言包加载、vue-i18n实例配置、响应式语言切换和第三方UI库集成。
2026-01-05 19:10:32
478
原创 树形结构遍历与递归应用解析
本文介绍了一个递归算法实现树形结构遍历的案例。通过Set数据结构处理节点ID的去重和快速查询，递归函数从根节点开始遍历，检查当前节点是否被选中，并递归处理子节点集合。当子节点被选中时，自动标记父节点为选中状态，并通过Set的特性合并多级结果。该算法实现了自底向上的结果收集，确保所有父节点被正确标记，同时通过条件判断处理递归终止和结果合并。核心在于递归遍历时各层变量的独立性与结果集的层级整合。
2025-12-15 17:44:53
331
原创 Vue3+Vite环境变量与多环境配置详解
本文介绍了在Vue3+Vite项目中配置和使用环境变量的完整方案。主要内容包括：1) 环境变量基础概念，通过import.meta.env访问变量，注意以VITE_为前缀的安全规则；2) 多环境配置方法，通过.env.[mode]文件区分开发、测试和生产环境；3) 代码中使用环境变量的示例，包括组件和Vite配置中的调用方式；4) 为TypeScript添加环境变量类型提示；5) 高级技巧如自定义环境文件目录和运行时配置覆盖。该方案实现了安全、灵活的环境变量管理，支持多环境开发和部署需求。
2025-11-26 18:47:45
1004
原创 刷新页面功能实现逻辑分析：中间路由机制的原理与优势
本文介绍了一种基于中间路由机制的页面刷新方案。核心流程包括：1）从缓存列表移除当前路由；2）调用useRedo()跳转中间路由；3）通过中间路由组件还原原始路由。该方案相比常规replace方法具有三大优势：强制组件重新渲染、支持复杂参数安全传递、提供统一开发接口。中间路由组件通过解析路由类型和参数，使用replace跳转回原始路由，确保参数完整传递和组件重新挂载。适用于需要完全刷新页面状态、重新获取数据或清除组件副作用的场景，相比常规方案能提供更可靠的刷新效果和更优的开发者体验。
2025-11-11 17:51:38
1043
原创 Vue中iFrame跨窗口通信实现与源码解析
Vue3框架下的iFrame通信系统设计 摘要：本文实现了一个基于Vue3的iFrame嵌套通信系统，主要包含路由配置、父组件容器、通信组件和内嵌页面等核心模块。系统使用postMessage实现跨窗口通信，通过useFrame工具封装消息收发逻辑，支持路由跳转、关闭标签页、刷新等交互操作。关键设计包括： 路由元数据配置frameSrc和消息回调 FramePage组件处理iFrame加载和消息监听 useFrame提供统一的通信接口 useEventListener实现事件监听管理 通过URL参数传递if
2025-11-04 14:45:25
723
原创 Vue项目全局配置与路由相关
本文介绍了Vue前端项目中的全局配置实现方案，重点分析了根组件AppProvider的设计原理和ElConfigProvider的使用优势。项目通过创建Pinia状态管理、路由配置和国际化设置实现基础架构，采用AppProvider作为根组件集中处理全局功能，包括动态标题、响应式布局和水印等。ElConfigProvider的使用实现了Element Plus组件库的集中配置管理，避免了重复代码，支持响应式更新和统一主题行为，有效提升了代码的可维护性和一致性。这种架构设计体现了"Provider
2025-11-03 17:55:27
675
原创 Nginx前端配置与服务器部署详解
本文梳理了Nginx前端配置与服务器部署的关系，主要包含：1)基础部署模式（物理机、虚拟化、容器化）及其IP特性；2)Nginx作为反向代理的配置方法，包括跨服务器通信的关键proxy_pass设置；3)详细部署流程与后端服务启动方式；4)常见问题解决指南，如跨服务器通信和配置错误排查；5)总结不同部署模式的特点与关键配置要点。文章通过具体配置示例和操作命令，为前端部署与Nginx配置提供实用指导。
2025-10-30 18:58:04
417
原创 基于Vue3与Element Plus的动态主题模式实现方案
本文介绍了前端主题切换功能的实现方案，包括全局模式（黑夜、灰度、色弱）和系统/菜单主题。全局模式通过在根元素添加CSS类名（如dark/gray/weak）配合filter属性实现视觉切换；系统主题则利用CSS变量动态控制颜色值，结合Vue响应式系统更新Element Plus等组件的主题变量。菜单主题通过特殊处理背景色、字体色等CSS变量实现联动。整体方案基于现代CSS特性（变量、过滤器）和框架响应式机制，实现了高复用性和灵活性的主题切换功能。
2025-10-28 18:14:13
965
原创 nginx前端部署与Vite环境变量配置指南
路径一致性原则与需保持路径层级一致示例：VITE_PUBLIC_PATH = ./ → VITE_GLOB_API_URL = ./api代理规则优先级使用^~修饰符确保精确匹配子目录路径优先于普通/api规则环境变量隔离严格区分与配置开发环境通过VITE_PROXY模拟代理，生产环境依赖Nginx配置。
2025-10-23 17:54:05
1035
原创 前端自动化部署全流程（Jenkins + Nginx）
本文介绍了使用Jenkins+Nginx实现前端自动化部署的完整流程。核心步骤包括：1)Jenkins通过Git拉取代码并执行npm构建；2)通过SSH将构建产物上传到Nginx服务器；3)Nginx配置静态文件服务和API反向代理。文章提供了详细的Jenkins Pipeline脚本和Nginx配置示例，并给出了多环境隔离、安全加固、负载均衡等优化建议。最后总结了部署逻辑：Jenkins负责构建和文件传输，Nginx作为静态服务器和API网关，实现前后端分离部署。文末还包含常见问题排查指南，帮助开发者快速
2025-10-17 16:35:35
1023
原创 Vue组件中Prop类型定义与泛型类型安全指南
本文总结了Vue和TypeScript开发中的类型安全实践技巧。在Vue中，对于复杂Props类型应使用PropType明确声明，避免类型丢失；简单类型虽可自动推断，但推荐统一使用PropType保持一致性。TypeScript泛型应用时，需通过<T extends Interface>约束参数类型确保安全。常见错误包括忽略PropType导致类型丢失和泛型约束不足，应通过类型明确定义来避免。关键原则是：复杂类型必用PropType、泛型约束保安全、统一编码风格。这些实践能有效提升代码的类型安全
2025-10-15 16:29:38
281
原创 DOM元素查询方法总结
本文总结了获取和操作DOM元素的多种方法。介绍了通过ID、选择器获取根元素，以及Vue框架中的$el和ref引用方式。对比了querySelector、querySelectorAll、getElementById等方法的区别，包括返回类型、作用域限制和动态更新特性。推荐了不同场景下的最佳实践，如使用querySelector获取单个元素，querySelectorAll批量操作元素。特别强调了作用域隔离的重要性，避免全局查询污染。最后通过el-upload组件示例，展示了如何在实际业务中结合表单验证触发文
2025-10-14 16:03:17
281
原创 python实用工具之从零开始打造图像转换器
本文介绍了一个基于Python的图像格式转换工具开发方案。该工具采用Tkinter构建GUI界面，结合PIL库实现核心转换功能，解决了手动转换效率低、跨平台兼容性等痛点。系统采用单例模式管理界面实例，通过双文件对话框实现输入输出分离，并包含完善的异常处理机制。文章详细解析了核心代码架构、Tkinter GUI编程和PIL图像处理等关键技术点，同时提供了使用pyinstaller打包发布的操作指南。该方案具有界面友好、操作简便的特点，适合非技术人员使用。
2025-09-22 11:36:29
312
原创 《Alien Invasion》游戏开发总结
本文介绍了一个基于Pygame框架开发的太空射击游戏"Alien Invasion"。游戏采用Python 3.x开发，运用了单例模式、组合模式和策略模式等设计模式。核心功能包括：玩家飞船控制、外星人波浪进攻、动态难度调整、得分统计等。文章详细阐述了游戏主类、飞船/外星人类以及碰撞检测等关键模块的设计实现，并提供了完整代码结构。该游戏通过精灵组管理游戏元素，实现了流畅的射击体验和动态难度提升机制，展示了Python游戏开发的基本流程和技术要点。（149字）
2025-09-19 10:58:12
303
原创 Pygame模块化实战：从零构建Aliens射击游戏全流程（一）
本文介绍了一个基于Pygame的太空射击游戏开发案例。项目采用模块化设计，包含主程序(alien_invasion.py)、设置管理(settings.py)、飞船控制(ship.py)和子弹实体(bullet.py)四个核心模块，实现了飞船移动、子弹发射和屏幕渲染等基础功能。游戏主循环通过事件监听实现键盘控制，包含60FPS帧率控制机制。该项目代码结构清晰，适合Pygame初学者学习游戏开发的基本流程和关键技术点。
2025-09-09 17:54:36
569
原创 js设计模式-状态模式
状态模式是一种行为型设计模式，通过将对象在不同状态下的行为封装为独立的状态类来实现状态管理。与策略模式类似，但状态模式的状态类可以自主控制状态转换，且通常需要引用当前对象。该模式适用于需要频繁修改或扩展状态的系统，如设备控制、游戏场景等。示例展示了电灯开关的两种实现方式：常规if-else方案适合简单场景，而状态模式方案通过状态类封装行为，使系统更易扩展和维护。当状态增多时，状态模式的优势更加明显，每个状态类只需关注自身逻辑和状态转移，避免了复杂的条件判断。
2025-09-05 14:41:09
465
1
原创 js设计模式-装饰器模式
装饰器模式是一种非侵入式扩展对象功能的设计模式，通过责任链方式组合功能，避免修改源代码。它支持原型扩展和工具函数增强，典型应用包括日志记录、性能分析和参数校验等场景。该模式具有代码复用性高、逻辑内聚、功能可插拔等优势，能有效遵循开闭原则和DRY原则。现代前端框架和中间件广泛采用装饰器模式，实现核心功能与扩展功能的解耦，降低维护成本，提高系统可扩展性。
2025-09-03 17:35:19
323
原创 js基础-this、call、apply、bind
本文探讨了JavaScript中this关键字的特性和绑定方法。this的指向在运行时动态确定，主要有四种情况：对象方法调用、普通函数调用、构造函数调用及call/apply调用。文章通过代码示例展示了不同调用方式下this的差异，并介绍了三种改变this指向的方法：call、apply和bind。其中，call适用于明确this和参数的情况，apply适合处理参数数组，bind则用于延迟执行或预设参数。这些方法在事件处理、回调函数等场景中尤为重要，能有效解决this指向不符合预期的问题。
2025-09-03 10:28:53
406
原创 js设计模式-职责链模式
职责链模式是一种行为设计模式，通过构建处理对象链实现请求的传递与处理。该模式包含抽象处理者、具体处理者和客户端三个角色，核心是将请求沿处理链传递直至被处理或返回默认结果。示例展示了日志分级处理链(Debug→Info→Error)的构建过程，通过setNext方法实现链式调用。关键优势在于请求与处理者解耦，支持动态配置处理链和灵活扩展。适用于多对象可能处理同一请求、处理顺序需动态调整等场景，如日志分级、权限验证等。JavaScript实现中需注意子类覆盖父类属性时super方法仍使用子类实例值的特性。
2025-09-02 19:08:07
953
原创 van-uploader上传图片添加水印实战
本文介绍了在Vue3+Vant项目中为上传图片添加水印的完整实现方案。通过封装addWatermarkFunc函数，将上传的File对象转换为Image后，利用Canvas绘制包含动态日期水印（红色文字、自适应大小）的图像，最终转回File格式。核心步骤包括：1）FileReader读取图片为DataURL；2）Canvas绘制原图并添加右下角水印；3）Blob转换回File对象。该方案实现了水印的自动化添加，且保持原始文件名和类型，可直接用于后续文件上传流程。
2025-08-19 15:32:50
458
原创 vue3项目大屏适配方案（scale)及vue-tv-focusable库使用
用途：主要用于大屏项目在tv中显示时，利用遥控器控制dom元素的聚焦。
2025-01-13 17:41:53
994
原创 python初体验: 处理excel数据
这段代码的功能是读取一个 Excel 文件，对数据进行筛选和处理，然后将结果保存到一个新的 Excel 文件中。具体步骤如下：读取 Excel 文件：使用 pandas 库的 read_excel 函数读取名为 data.xlsx 的 Excel 文件。只读取 Sheet1 工作表中的 Name、Age 和 City 三列数据。查看数据：使用 print(df.head()) 查看数据的前几行，默认显示前5行。
2025-01-08 18:06:23
612
原创 前端导出excel实战(xlsx库和exceljs库）
前端导出excel是比较常见的需求，比如下载excel模板和批量导出excel。目前比较常用的库有xlsx和excel，接下来就着两种方式进行梳理。原理基本同xlsx，只不过相比之下，exceljs库更为强大，可以自定义导出的excel的样式。excel库除了设置单元格样式外，另外常见的使用有设置单元格下拉框，限制某个单元格不可编辑等。另外还有exceljs还有其它很多强大的功能，在这就不一一举例。exceljs库实现。
2024-12-06 17:32:27
1655
原创 echarts自定义tooltip、legend等
1. 因为指标数过多，一行展示一个指标会造成高度很高，呈现效果不佳，优化成一行展现两个指标，从而减少高度// 初始化一个空字符串来存储 tooltip 的内容// 对数据进行排序??0));// 创建一个数组来存储每行的内容// 遍历 params 数组// 拼接 series 名称、类目值和数值${// 初始化一个空字符串来存储 tooltip 的内容 var tooltipContent = '';
2024-11-20 17:41:03
2869
原创 前端分页：非当前页进行表单验证
对于大数据量批量导入，渲染到表格的场景中，可能会造成浏览器崩溃，此时前端分页可以很好地解决这个问题，但是组件库自带的表单验证通常只能进行当前页的验证，如何实现对全量数据的表单验证呢？需要借助async-validator库的使用，这里着重讲下，相关代码如下。可以根据校验规则，来进行是否符合校验判断，并返回布尔值。
2024-10-28 17:09:17
796
2
原创 Blob、File等相关使用详解
当读取操作完成时，它会将文件的内容以二进制数组（ArrayBuffer）的形式返回。这在处理非文本数据时特别有用，比如图像、音频或视频文件，或者当你需要直接访问二进制数据进行更底层的操作时。在JavaScript中，FileReader 对象允许你异步地读取存储在用户计算机上的文件（或Blob和File对象）的内容。它继承了 Blob 的所有属性和方法，并且添加了一些与文件相关的额外属性和功能。options： type：默认值为 “”，表示将会被放入到 blob 中的数组内容的 MIME 类型。
2024-09-26 16:21:42
1284
原创 SVG之绘制路径动画
/script>CSS自定义属性（也称为CSS变量）允许你在CSS文档中设置一次值，然后在整个文档中重用这些值。它们以–为前缀，其中是变量名。这些变量可以在CSS的任何地方使用，包括在var()函数中，该函数用于引用自定义属性的值。
2024-07-31 18:05:40
1065
1
原创 SVG使用之path
在这个例子中，它们都是45，意味着椭圆弧是一个圆形弧（如果rx和ry不相等，则是一个椭圆弧）0（第二个）：这个大弧标志（large-arc-flag）用于指示弧是大于还是小于180度。stroke-dasharray：stroke-dasharray属性用于创建虚线效果，通过指定一系列的数字来定义虚线中“实线”和“空白”的长度。0（第三个）：这个扫掠标志（sweep-flag）用于指示弧的绘制方向。0（第一个）：这个参数是旋转角度，表示椭圆弧相对于x轴的旋转角度（以度为单位）。
2024-07-29 17:31:46
1039
原创 Excel使用技巧（一）
制作单斜线表头，可以在单元格中添加一个45°的边框线，然后输入项目名称。再把光标放到两个项目名称之间，按Alt+回车，使其强制换行。星号是通配符，就像扑克中的大王，可以表示任意多个字符。除此之外，还有一个小王，就是半角的问号?，他的作用是表示任意一个字符。在“替换为”编辑框中不输入任何内容，直接点全部替换就OK。再输入等号，按方向键的上箭头，最后按Ctrl+回车即可。选中数据区域，然后按住Alt键不放 再按等号即可。已经录入数据的表格，要调整某一列的位置怎么办？按Ctrl+G，定位→空值。
2024-06-14 17:37:16
405
原创 Excel根据身份证号提取信息
“0000-00-00”)：使用 TEXT 函数将提取出来的出生年月日信息按照指定的格式“0000-00-00”进行格式化显示。MID(B2,7,8)：表示从单元格 B2 中的字符串（这里是身份证号），从第 7 个字符开始，提取长度为 8 个字符的子串。公式：=EDATE(D2,IF(F2=“男”,720,IF(F2&C2=“女干部”,660,600)))公式：=IF(MOD(MID(B2,17,1),2)=1,“男”,“女”)公式：=TEXT(MID(B2,7,8),“0000-00-00”)
2024-06-13 18:01:27
26213
原创 Excel自定义排序和求和
举个例子1. 填充自定义排序选项选定目标排序值；文件->选项->自定义排序->导入2 . 应用于所要排序的表格选中要排序的表格数据；数据->自定义排序->排序。
2024-06-12 18:24:40
1053
原创 学会前端虚拟滚动，看这篇就够了
前端虚拟滚动是一种用于优化长列表或大量数据展示的技术。它的主要原理是只渲染用户当前可见区域的数据，而不是一次性渲染整个列表或数据集。在传统的列表渲染中，如果数据量很大，渲染所有数据可能会导致性能下降，特别是在滚动时。虚拟滚动通过动态计算可见区域的位置和需要渲染的数据范围，只渲染可见区域内的部分数据，并在滚动时实时更新渲染的内容。总结下就是：先上代码直观体验下index.vuemyVirtualScroller.vue虚拟滚动的思路总结如下：1. 确定视窗位置：通过获取列表滚动区域的scrollTop属性
2024-05-29 17:46:16
6261
原创 浅谈MutationObserver
MutationObserver 是一个强大的 Web API，它允许你监视 DOM 的变化，例如节点的添加、删除、属性的修改等。
2024-05-27 17:51:58
2435
原创 浅谈ResizeObserver
ResizeObserver的应用场景广泛，主要包括以下几个方面：响应式布局：当网页布局需要根据容器大小变化而自适应时，可以使用ResizeObserver来监听容器元素的大小变化，并相应地调整布局和样式。通过这种方式，可以确保元素在尺寸变化时能正确调整其内部样式和内容，为访问者提供更好的用户体验。数据可视化：在使用如ChartJs等图表库创建图表时，可以结合ResizeObserver来实现图表的自适应大小。
2024-05-27 17:36:15
1957
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人