- 博客(58)
- 收藏
- 关注
RSS订阅原创 JavaScript去除对象字段空格
摘要：本文介绍了一个递归处理对象字符串字段的JavaScript函数trimObjectStrings。该函数能遍历对象所有字段，对字符串类型执行trim()操作去除前后空格，同时支持嵌套对象处理。函数会保留非字符串字段类型，避免处理null值时出错，适用于任意深度的嵌套对象结构，最终返回处理后的对象引用。
2025-12-12 13:47:00
95
原创 在Javascript中遍历一个树状结构数据而不使用递归来快速搜索目标节点
本文介绍了在JavaScript中非递归遍历树结构的三种方法：1. 使用队列实现广度优先搜索(BFS)，逐层遍历节点；2. 使用栈实现深度优先搜索(DFS)，模拟递归调用过程；3. 利用ES6迭代器和生成器遍历树节点。这些方法通过循环迭代替代递归，有效解决了大规模树结构遍历时可能出现的栈溢出问题，同时保持高效的搜索性能。其中栈实现的DFS最直观地模拟了递归调用，而BFS则采用队列实现层次遍历，迭代器方式提供了更现代的语法支持。
2025-12-08 11:31:06
323
原创 解决Vue中vue-cli项目开发过程中sockjs.js报错
Vue项目运行时报sockjs-node连接超时错误的解决方法。该错误是由于sockjs-client库持续尝试建立通信通道导致的。解决方法是在node_modules中找到sockjs.js文件，注释掉1605行的xhr.send(payload)代码即可消除错误。这种方法通过阻止不必要的连接请求来解决问题，适用于不需要sockjs功能的开发场景。
2025-12-05 18:00:44
275
原创 el-input textarea 禁止输入中文字符，@input特殊字符实时替换，光标位置保持不变
在Vue的ElementUI中使用<el-input type="textarea">组件时，可通过两种方法实现输入内容实时替换且保持光标位置： DOM操作法：监听input事件，记录光标位置，替换内容后通过setSelectionRange恢复光标位置。适用于直接操作DOM的场景。 数据分离法：使用计算属性分离显示值和存储值，在input事件中处理文本并更新显示值，同时维护内部存储值。避免直接DOM操作，但实现稍复杂。 两种方法都支持在替换内容（如中文逗号转英文逗号）后保持
2025-09-11 17:07:59
319
原创 el-input 重写带图标密码框（点击小眼睛显示、隐藏密码）
摘要：本文介绍了如何扩展ElementUI密码输入框功能，使其在禁用状态下仍支持明文/密文切换显示。通过自定义v-model绑定、showPassword状态管理和后缀插槽，实现了点击图标切换显示效果，并提供了focus/blur事件处理来优化交互体验。文中包含完整的template模板、script数据逻辑和style样式代码，演示了如何覆盖官方组件限制，实现禁用状态下的密码显示控制功能。
2025-08-19 14:40:36
591
1
原创 Vue 利用el-table和el-pagination组件，简简单单实现表格前端分页
本文介绍了一个基于Element UI的el-table组件实现前端分页的demo。通过模拟100条数据，展示了如何在Vue项目中实现表格数据的前端分页功能。代码提供了完整的分页逻辑，包括页码切换、每页条数调整等核心功能，并封装了currentChangePage方法处理数据分页。该实现可直接复制使用，也可作为基础进行二次封装成可复用组件。文章还包含完整的HTML模板、JavaScript逻辑和CSS样式代码，方便开发者快速集成到项目中。
2025-08-11 16:55:22
412
原创 Vue2中，Promise.all()调用多个接口的用法
Vue中使用Promise.all()可以同时调用多个接口并统一处理结果。示例1展示了在mounted()中并行请求用户信息和订单列表，通过解构赋值存储数据；示例2则封装了相同接口不同参数的调用方式，支持条件查询和局部更新。两种方式都通过.catch()统一处理错误，其中第二种方式通过函数封装提高了代码复用性。Promise.all()需注意任一请求失败会导致整体失败，必须进行错误捕获。
2025-08-08 18:27:49
557
原创 使用 input 手动上传文件到服务器， 选择文件后再次修改文件再上传失败（ ＜input type=“file“ /＞ 自定义上传）
【摘要】文件上传功能存在浏览器安全机制导致的BUG：当用户修改已选文件后再次上传会报错。分析发现浏览器会阻止修改后的文件上传。提供两种解决方案：1）转Base64保持初始文件（不推荐，无法更新修改内容）；2）通过接口捕获错误提示用户重新上传（推荐）。代码实现展示了如何通过FormData提交文件，并利用FileReader检测文件变更，在错误时提示用户。该问题涉及浏览器安全策略，需通过前端交互设计妥善处理文件修改后的上传需求。
2025-08-06 11:22:24
421
原创 JS 在数组对象指定位置添加多个对象
本文介绍了在JavaScript数组中指定位置插入多个对象的四种方法：1）使用splice()方法直接插入；2）通过concat()合并数组；3）结合扩展运算符和slice()创建新数组；4）使用unshift()在开头插入。其中splice()是最直接有效的方法，而push()适用于末尾插入。每种方法都提供了代码示例，开发者可根据具体需求选择合适的方式操作数组。
2025-08-06 09:57:07
475
原创 element-ui中的el-radio-group组件报错:Blocked aria-hidden on an element because its descendant retained ...
使用element-ui中的el-radio-group组件报错，Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert a
2025-07-08 10:13:58
509
原创 CSS 中aspect - ratio属性的用途及应用
CSS aspect-ratio 属性 是一种用于控制元素宽高比的新特性，允许开发者为任意元素（如图片、视频或容器）显式设置比例，确保在不同屏幕尺寸下保持一致的视觉效果
2025-06-23 16:47:07
681
原创 JS 大整数相加
在JavaScript中处理大整数相加时，由于JavaScript的Number类型是基于IEEE 754标准的双精度64位浮点格式，它只能安全地表示从-(2^53 - 1)到2^53 - 1（大约是-9007199254740991到9007199254740991）之间的整数。超出这个范围的整数在进行加法运算时可能会失去精度，导致不正确的结果。
2025-06-23 16:14:55
408
原创 Vue 比较两个数组对象，页面展示差异数据值
Vue 中使用 Lodash 的 differenceBy 函数可以方便地比较两个数组并找出它们的差异。
2025-06-20 17:00:42
606
原创 Vue 复制页面内容
在 Vue 2 中复制内容到剪贴板可以通过多种方式实现，但最常见和简单的方法是使用原生 JavaScript 的 document.execCommand('copy') 方法。然而，需要注意的是，从 Chrome 54 开始，execCommand('copy') 在非用户触发的情况下已经被废弃，这意味着你不能在事件监听器之外直接使用它。
2025-06-19 18:09:42
330
原创 js 两个数组按照第二个数组的顺序排序
本文介绍了在JavaScript中使用数组排序的几种方法：1）利用sort()和indexOf()按参照数组顺序排序；2）创建映射对象优化排序性能；3）处理参照数组中不存在的元素；4）扩展应用至对象数组排序，包括创建ID映射和使用findIndex()方法。文中提供了具体代码示例，展示了如何实现数组排序及处理特殊情况，如将不存在的元素排在最后。这些方法适用于需要按照特定顺序排列数组元素的场景。
2025-06-13 16:13:32
316
原创 ES6——数组扩展之Set数组
[...new Set()] 是一种在JavaScript中用于去重和展开集合的操作。具体来说，new Set() 创建一个新的 Set 对象，该对象存储的元素是唯一的，不会出现重复的值。通过使用扩展运算符（...），可以将 Set 对象中的元素展开成数组形式。
2025-06-06 17:38:32
674
原创 ES6——对象扩展之Set对象
ES6的Set对象用于存储唯一值，提供多种操作方法：add()添加元素（重复则不添加），delete()删除元素，has()检查存在性，clear()清空集合，size属性获取元素数量，forEach()遍历元素。示例展示了这些方法的用法，如创建集合、增删查操作以及遍历输出。Set对象为处理唯一值集合提供了简洁高效的解决方案。
2025-06-06 17:14:40
445
原创 js 比较两个对象的值,不相等就push对象的key
本文介绍了三种在JavaScript中比较对象值并找出差异key的方法：1) 通过JSON.stringify和简单遍历处理基本对象；2) 递归方法深度比较嵌套对象，并标记差异路径；3) 使用lodash库的isEqual和omitBy函数。方法适用于不同场景，从简单键值对到复杂嵌套结构。开发时可根据对象复杂度、是否允许使用第三方库等因素选择合适方案，其中递归方法能最精确地处理深度嵌套对象的差异检测。
2025-06-05 15:07:14
613
原创 js 比较两个对象的值是否相等
JavaScript对象比较方法摘要：对象直接比较(==/===)只能判断引用相等。值相等需属性比较：1)浅比较只检查顶层属性；2)深比较用递归处理嵌套对象；3)推荐使用lodash的isEqual函数处理复杂结构。浅比较适合简单对象，深比较确保嵌套属性正确对比，第三方库提供最完整解决方案。
2025-06-05 14:59:59
399
原创 js 字符串中的特殊字符全部替换成定义对象里面key对应的value值（进阶篇）
js 字符串中的特殊字符全部替换成定义对象里面key对应的value值
2025-05-12 16:07:09
440
原创 js 字符串中的特殊字符全部替换成定义对象里面key对应的value值（基础篇）
在JavaScript中，如果想要将字符串中的特殊字符替换成对象key对应的value，你可以使用String.prototype.replace()方法配合正则表达式来实现。这种方法非常灵活，可以让你定义一个查找模式（通常是特殊字符或字符串片段），然后提供一个函数或字符串来替换这些模式。
2025-05-12 14:27:23
352
原创 VUE el-select下拉框动态设置禁用，删除后恢复可选择
点击新增添加按钮，列表table会新增一条包含下拉菜单的数据，如果其中任何一个下拉框选择了某个值，那么新增的下拉菜单的选项中该值是禁用状态，只能选择其他未被选中过的值。点击删除按钮后，已禁用的选项放开，可再次选择。
2025-05-09 15:52:03
1256
原创 js 两个数组中的指定参数（id）相同，为某个对象设置disabled属性
在JavaScript中，比较两个数组并根据它们的id属性设置某个对象的disabled属性为true，有几种常用方法。方法1：使用forEach和some遍历数组并检查id是否存在。方法2：使用Set存储id以提高查找效率。方法3：使用findIndex提高代码可读性，尽管性能可能不如前两种方法。方法4：使用filter和map组合，创建新数组并标记符合条件的对象。选择哪种方法取决于具体需求和性能考虑，通常使用Set或Map的方法最为高效和清晰。
2025-05-09 14:48:54
348
原创 Element-UI Message Box 使用$msgbox方法自定义模版内容，修改默认样式
Element-UI Message Box 使用$msgbox方法自定义模版内容，修改默认样式
2025-04-23 17:06:41
576
原创 VUE Element-ui Message 消息提示组件自定义封装
为了让message信息提示的更加方便快捷，减少不同地方的调用，避免代码的重复，特意再官方message组件的基础上二次封装，使代码更加的优雅和高效。
2025-04-23 16:00:18
482
原创 JS 浅析正则表达式
做数据的校验，就离不开正则表达式，现在网上常用的正则表达式都很全，很多都是开箱即用，非常方便和快捷，但是偶尔也会遇到那种很特殊的正则校验，如果能清楚的明白正则的校验规则，那么任何时候，面对任何需求，我们都会很轻松，从容而又优雅的写出所匹配的正则表达式，从此告别盲目的搜索！
2025-04-22 10:48:21
537
原创 Vue v-for 循环DOM 指定dom个数展示一行
这些方法都可以实现基于v-for循环的DOM元素按特定规则分行显示的效果。选择最适合你需求的方法。
2025-04-21 15:51:54
402
原创 js 两个数组中的指定参数（id）是否重复
在JavaScript中，如果想检查两个数组中的id或者其他指定的参数是否重复，有几种方法可以实现。这里已id作为指定参数，以下是几种常用的方法： 方法2：使用forEach和includes 方法3：使用Map（如果需要跟踪重复的对象） 方法4：使用reduce和Set（更简洁） 经常使用，所以记录一下~
2025-04-21 15:37:08
595
原创 ES6 Object.values 特定字段处理
以上方法可以根据具体需求选择使用。如果只需要几个特定的字段，直接通过属性访问或者使用reduce方法可能是最直接和高效的方式。如果需要更灵活的处理（例如，基于某些条件选择字段），那么使用filter或结合map的方法可能更合适。
2025-04-18 10:32:26
997
原创 ES6 Object.keys()、Object.values()、 和 Object.entries() 区别
返回对象的属性名数组。返回对象的属性值数组。返回对象的键值对数组，每个键值对都是一个包含两个元素的数组。这三个方法在处理对象时都非常有用，特别是在你需要遍历对象的属性或值，或者需要将对象的属性或值转换为数组时。
2025-04-18 10:13:52
588
原创 Vue el-from的el-form-item v-for循环表单如何校验rules（二）
v-for循环对象的时候，是可以获得三个参数的，其中第一个参数是对象每一项的value值，第二个参数是每一项的key值，第三个参数是索引值，这里使用:prop="key+'.对应的key'"即可（不要漏了单引号里面的点）。循环对象的话是可以获得两个参数，其中第一个是数组的每一项，第二个参数是数组的下标，其实和对象是差不多的，v-for="(item,index) in array" , :prop="`array[${index}].name`"
2025-04-16 11:16:49
905
原创 Vue el-from的el-form-item v-for循环表单如何校验rules（一）
实际业务需求场景： 新增或编辑页面（基础信息表单，一个数据列表的表单），数据列表里面的表单数是动态添加的。数据可新增、可删除，在表单保存前，常常需要做表单必填项的校验，校验通过以后才去发请求保存表单数据。
2025-04-15 13:31:40
868
原创 Vue 解决 Error: please transfer a valid prop path to form item!
在 Vue.js 中使用表单验证库（如 VeeValidate 或 Element UI 的表单组件时），遇到错误信息 "please transfer a valid prop path to form item!" 通常指的是在表单项的属性绑定中，路径（prop path）不正确或者未正确传递。这种问题通常出现在表单验证规则的设置或者表单项的绑定上。
2025-04-14 14:13:28
2023
原创 Vue表单组件el-form校验规则rules，条件判断rules表单验证显示必填或非必填
在使用 Element UI（一个基于 Vue 的前端框架）的表单验证功能时，你可能想要实现一个规则，使得某些字段在特定条件下成为必填项，或者在满足某些条件时不允许为空。这通常通过自定义校验规则来实现。
2025-04-14 13:48:04
1635
原创 Vue ‘v-model‘ directives require the attribute value which is valid as LHS.
在上述代码中，我们将计算属性改为普通函数，并且在调用时传入了 item 数据。这样就能够正常获取到 item 数据，并根据 item.checked 的值来返回选中状态了。
2025-04-11 11:22:49
1061
原创 element el-transfer穿梭框的重写，自定义穿梭框组件封装
通过element官方文档可以了解到 el-transfer穿梭框的基本使用方法，但是在实际业务需求中，官方组件已经无法满足产品设计和业务实际使用需求，官方提供的方法有限，无法满足各种定制化需求，今天就来封装一个Transfer 穿梭框组件，支持全流域自定义，方便、快捷、高效，开箱即用，满足各种业务场景及需求。
2025-04-03 15:30:38
674
Echarts 世界地图和主要国家的 JSON 文件
2023-12-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人