- 博客(237)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 基于Element Plus的Vue3远程搜索多选组件实现与优化
本文介绍了基于Vue3+TypeScript+Element Plus实现远程搜索多选下拉框的完整方案。通过拆分组件功能需求，详细解析了模版结构、核心逻辑与样式优化三个关键部分。重点解决了大数据量场景下的性能问题，实现按需搜索加载、数据去重、已选项保留等核心功能，并提供了映射表缓存、loading状态反馈等优化手段。文章还探讨了可扩展的高级功能，如选项分组、懒加载和防抖处理，为开发高性能多选组件提供了完整的技术思路。
2025-09-23 22:06:53
889
原创 告别冗余 DOM：Vue Fragment 用法与性能优化解析
Vue3的Fragment特性解决了组件必须单根节点的限制，允许返回多个同级元素而不生成额外DOM节点。它作为虚拟DOM容器，能减少不必要的嵌套、优化CSS布局，并提升性能（降低DOM操作开销、减少内存占用、优化虚拟DOM比对效率）。Fragment特别适合需要扁平化DOM结构的场景，如Flex/Grid布局或列表渲染。虽然Vue3已自动支持，开发者也可通过<template>标签或渲染函数手动使用。相比Vue2的强制包裹方案，Fragment使代码更简洁、性能更优，是组件设计的重要优化手段。
2025-09-17 22:06:22
939
4
原创 用 “走楼梯” 讲透动态规划！4 个前端场景 + 4 道 LeetCode 题手把手教
动态规划是一种通过拆解问题、记录子问题答案来优化计算的算法思想。其核心包括：定义状态（如dp[n]表示n级台阶的走法）、建立状态转移方程（如dp[n]=dp[n-1]+dp[n-2]）和设置初始条件。典型应用包括路径规划、字符串匹配和资源分配等场景。前端开发中可用于网格最短路径计算（如LeetCode 64题）、文本差异比较（如最长公共子序列）等。通过保存中间结果避免重复计算，将指数级复杂度降为线性级，显著提升效率。
2025-09-03 22:38:47
542
原创 Vue3响应式陷阱：如何避免ref解构导致的响应式丢失
Vue3响应式陷阱：多维度评分表单中的解构赋值风险 本文通过一个教师评分系统的实战案例，揭示了Vue3中ref与reactive的响应式陷阱。当开发者使用ref管理复杂表单数据时，常见的解构赋值操作可能导致响应式丢失。案例展示了三层嵌套的表单结构（学生信息→评分维度→评分项），在数据回显时触发"vue/no-ref-object-destructure"警告。文章深入剖析了响应式原理，并提出两种解决方案：1）全程使用reactive保持嵌套数据的响应式；2）完全采用reactive重构表
2025-09-01 20:43:47
897
原创 TypeScript实战：轻松实现数字序号转中文大写数字
本文介绍了前端开发中将数字序号转换为中文大写数字的几种实现方案。针对不同需求场景，提出了三种解决方案：1）对象映射法，适合固定范围的简单转换；2）数组映射法，适用于连续序号处理；3）动态算法，可支持大范围数字转换。文章重点分析了各方案的特点、适用场景和边界处理策略，并强调TypeScript在类型安全方面的优势。开发者可根据实际需求选择最适合的方案，如简单映射表或动态生成算法，同时注意处理超出范围的输入情况。
2025-08-27 21:15:39
411
原创 Vue3 + Element Plus实现表格多行文本截断与智能Tooltip提示
本文介绍了在Vue3和Element Plus中实现表格多行文本截断及智能Tooltip显示的方法。通过CSS的-webkit-line-clamp属性实现多行截断，结合JavaScript动态判断文本是否溢出，从而智能控制Tooltip的显示：当文本超出2行时显示Tooltip，否则隐藏。文章提供了完整的代码实现，包括CSS样式设置、Vue条件渲染逻辑以及效果展示图，为开发者提供了一个可直接使用的解决方案，同时保留了根据需求调整的灵活性。该方案有效提升了表格展示长文本时的用户体验。
2025-08-26 21:38:47
587
原创 搞懂HTTP响应头：content-disposition与content-type的核心区别，附可复用下载工具
本文详细解析了HTTP响应头中content-type和content-disposition的区别与配合使用。content-type定义文件格式（如Excel、PDF），决定浏览器如何解析数据；content-disposition控制文件处理行为（下载或预览），可指定下载文件名。两者协同工作可解决文件下载时的乱码、预览错误等问题。文章提供了常见文件类型的MIME类型对照表、后端响应头设置示例、前端处理代码及实用下载工具包，帮助开发者彻底掌握文件下载的核心机制。
2025-08-26 09:20:34
1323
原创 ESLint 报“Missing radix parameter“？一文搞懂原因与解决方案
本文解析了ESLint的"Missing radix parameter"警告，指出这不是语法错误而是代码规范问题。parseInt函数不指定基数参数(radix)时存在解析歧义：可能按十六进制/八进制解析字符串。解决方案是显式添加基数参数10（十进制），并建议结合空值检查（如trim()）处理无效输入。文章强调规范使用parseInt能避免潜在Bug，不应关闭该ESLint规则。核心要点是：始终传递基数参数10，并做好输入校验。
2025-08-22 14:22:19
489
原创 踩坑记录：el-form表单输入框筛选，回车竟触发表单提交？
摘要：ElementUI的el-form组件在单搜索框场景下存在回车键自动提交表单的问题，这是由于HTML默认行为导致的。当表单仅含一个单行文本输入框时，回车键会触发表单提交而非预期操作。解决方法是在el-form标签中添加@submit.prevent修饰符，阻止默认提交行为。该问题常见于搜索筛选和弹窗新增字段场景，通过简单修改即可解决交互异常问题。（149字）
2025-08-19 15:42:52
383
原创 一文搞懂 Vue3 Router 的 path 和 name：区别、用法与最佳实践
Vue3中Vue Router的path和name区别：path是URL路径（如"/user/list"），用于匹配地址栏；name是路由唯一标识（如"userList"）。主要区别在于：1)path需完整路径跳转，name通过名称引用；2)path仅支持query传参，name支持params和query；3)name在嵌套路由中更具优势。path适合简单静态路由，name适合复杂动态路由。建议优先使用name+params方式跳转，便于维护和解耦，路径变化时不影响
2025-08-15 23:08:03
637
原创 位运算在权限授权中的应用及Vue3实践
本文介绍了位运算在前端权限管理中的高效应用。通过定义基于2的幂次方的权限枚举，利用位运算的与、或、异或等操作实现权限的添加、移除和验证。在Vue3框架中，结合Pinia进行全局权限状态管理，并实现了自定义指令和组件来控制元素权限。这种方案具有高性能、低内存占用和良好扩展性，一个32位整数可表示32种权限状态，适合复杂的细粒度权限控制场景。
2025-08-03 21:37:31
513
原创 Element中ElMessageBox弹框内容及按钮样式自定义
本文介绍了如何实现Element Plus消息框的两种样式定制：1.通过dangerouslyUseHTMLString属性允许使用HTML标签为文本添加红色样式；2.通过confirmButtonClass属性设置确认按钮的红色背景，可使用Element自带类或自定义样式（注意自定义样式需去除scoped限制）。文末展示了实现效果图，包含红色文本和红色按钮的确认对话框。
2025-07-23 22:54:08
1202
原创 Vue3虚拟滚动实战：从固定高度到动态高度，告别列表卡顿
虚拟滚动技术原理与实现 虚拟滚动是一种优化长列表性能的技术，其核心思想是只渲染当前可视区域内的内容，而非一次性加载所有数据。当用户滚动时，动态移除不可见元素并加载即将显示的内容。这种方式可显著降低内存和CPU消耗，使万级列表也能流畅滚动。 在Vue3中可通过vue-virtual-scroller库实现： 固定高度列表：设置item-size指定统一高度，性能最优 上拉加载列表：结合分页加载机制，监听滚动位置动态加载数据 关键配置包括设置容器高度、定义每项尺寸和处理滚动事件。该技术特别适用于社交动态、商品列
2025-07-20 21:59:09
2276
1
原创 别怕递归！前端递归原来这么简单
递归是函数自己调用自己并设置终止条件的编程技巧。前端开发中常用于处理树形结构（如菜单导航）、深拷贝对象等场景。递归实现需要满足两个关键条件：必须设置终止条件防止无限循环，以及每次调用要缩小问题规模。典型应用包括遍历树形数据、反转二叉树、实现深拷贝等。通过合理运用递归，可以简洁高效地解决嵌套结构问题，但需注意控制递归深度以避免性能问题。递归就像俄罗斯套娃，一层层处理直到满足终止条件。
2025-07-13 22:46:15
508
原创 Vue响应式系统：从原理到核心API全解析
响应式原理与实现 摘要：本文详细解析了Vue3响应式系统的核心原理，重点介绍了如何通过Proxy实现数据拦截。响应式机制的核心在于拦截对象的读取和设置操作，自动追踪依赖并触发更新。文章从基础示例出发，逐步讲解了reactive、ref等核心API的实现逻辑，包括依赖收集（track）、触发更新（trigger）和副作用管理（effect）等关键环节。通过WeakMap、Map和Set构建的多层数据结构管理依赖关系，并展示了如何利用调度器（scheduler）优化更新性能。最后简要说明了ref的实现原理，通过
2025-07-06 11:20:57
929
原创 TypeScript类型定义：Interface与Type的全面对比与使用场景
TypeScript中的interface和type都是定义类型的重要工具，但各具特点。interface主要用于定义对象结构，支持继承和声明合并，适合面向对象设计和类实现；type则更灵活，可以定义联合类型、交叉类型等复杂类型，支持映射类型运算。选择时，对象结构优先用interface，复杂类型运算适合用type。两者配合使用能提升代码的可维护性和扩展性，需根据实际场景灵活选择。
2025-06-22 21:55:30
521
原创 Vue 项目实战：三种方式实现列表→详情页表单数据保留与恢复
1.路由传参：利用 URL 查询参数传递数据，简单直接但受限于数据量；2. Vuex/Pinia 状态管理：通过全局状态存储表单数据，适合复杂场景下的跨组件共享；3. keep-alive 缓存：通过组件缓存机制保留状态，无需手动管理数据。每种方案均附代码示例与场景对比，助你根据项目需求选择最优解。
2025-06-07 10:13:50
846
原创 为什么前端团队都在抢用Husky？看完这篇你就懂了
Husky是现代前端工程化中不可或缺的一部分。Husky的核心价值在于通过自动化工具提升了代码质量和团队协作效率。
2025-05-30 21:55:36
1342
原创 使用Vue + Element Plus实现可多行编辑的分页表格
随着用户对数据操作便捷性要求的不断提高，具备灵活编辑功能的表格成为了开发中的常见需求。特别是在需要处理大量数据时，不仅要实现数据的分页展示，还要支持对数据的实时编辑，并且要保证在复杂操作场景下的数据状态管理。
2025-05-28 15:53:59
642
原创 Vue3+Vite+TypeScript项目中跨页多选表格的实现与应用
采用 Vue3 + Vite + TypeScript 技术栈的项目中，实现一个支持跨页选择的复选框表格成为提升用户体验。
2025-05-22 17:21:11
345
原创 Vue 项目中：对象遍历与数组遍历展示文案的实践对比
在 Vue 项目里，若要展示多个样式相同的文案，可借助v-for指令遍历数组或者对象来优化代码。
2025-05-20 09:49:38
178
原创 JavaScript金额处理技巧：限制输入并实时截断为两位小数
金额字段要求只能输入两位且直接进行截断，该需求涉及JavaScript数字精度问题。
2025-04-18 11:00:08
343
原创 Missing required prop: “maxlength“
Vue封装子组件，对于非必须上传的属性，切不可丢掉 ? 可选链，否则console控制台就会有warn信息，如Missing required prop: "maxlength"。
2025-02-21 15:26:01
383
原创 element-plus树形数据与懒加载的实现
vue2+element-plus实现树形数据与懒加载实现方式。[Vue warn]: Duplicate keys detected: '111'. This may cause an update error.
2025-02-18 11:17:03
1139
原创 vue2表单校验报错信息： TypeError: Cannot read properties of undefined (reading ‘indexOf‘)
TypeError: Cannot read properties of undefined (reading 'indexOf')
2025-02-16 10:44:10
576
原创 error v-on event ‘@getData‘ must be hyphenated
error v-on event '@getData' must be hyphenated vue/v-on-event-hyphenation的解决方案
2025-01-03 15:51:21
796
原创 error Boolean prop with ‘true‘ value should be written in shorthand form vue/prefer-true-attribute
Vueu框架中的一个linting规则，对于布尔类型的prop，如果值为true，应该使用简写形式，直接写输入，如disabled,而不是:disabled="true"。这个linting规则是在提高代码的一致性和可读性。
2024-12-18 09:23:42
287
原创 subject may not be empty | type may not be empty 报错解决
代码提交到暂存区时，不满足操作规范，弹出错误日志 subject-empty | type-empty类型的报错解决
2024-12-15 21:30:29
642
原创 转换的艺术：如何在JavaScript中序列化Set为Array、Object及逆向操作
Set概念：存储唯一值的集合，元素只能是值，没有键与之对应。Set中的每个值都是唯一的。特性：值的集合，值可以是任何类型。值的唯一性，每个值只能出现一次。保持了插入顺序。不支持通过索引来访问元素。时间复杂度：查找、插入、删除操作通常是O(1)。
2024-11-28 22:10:32
935
原创 扩展运算符与reduce的特点及常用使用场景
扩展运算符通常用于传递数组作为函数的参数；复制数组或对象，合并数组或对象。reduce()方法通常用于需要数组元素累积的结果；需要执行更复杂的场景来转换数组到另一个形式，如对象或字符串。
2024-11-28 15:06:53
305
原创 高效数据处理：Map在JavaScript中的应用及其与Object的不同
Map的特点及使用场景；Map 和 Object 有什么区别？哪些情况下 Object 性能优于 Map？
2024-11-25 21:30:40
1088
原创 转换的艺术：如何在JavaScript中序列化Map为Object及逆向操作
Map 不能直接被 JSON.stringify()序列化，需要先转成对象。因为 JSON.stringify()方法仅能处理纯 JSON 数据结构，而 Map 是一个特殊的集合类型，它不能直接对应于 JSON 的任何数据结构。
2024-11-25 21:24:03
689
原创 Vue中父组件通过v-model向子组件传对象参数
父组件通过v-model传递，子组件通过props:{modelValue: Object}进行接收，通过 emit(‘update:modelValue’, configData.value)事件更新绑定的数据。
2024-11-09 13:34:10
1320
Vue3远程搜索多选组件实现
2025-09-23
node-v10.16.0-x64.msi
2019-06-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人