- 博客(67)
- 收藏
- 关注
RSS订阅原创 Element-UI Message Box弹窗 使用$confirm方法自定义模版内容，修改默认样式
本文介绍了两种使用Vue的$createElement方法实现自定义删除确认弹窗的方案。第一种方案通过map方法将确认文本数组转换为p标签数组，第二种方案则更灵活地控制文本样式，包括字体大小、颜色和重点文本突出显示。两种方案都使用$confirm方法创建弹窗，包含标题、自定义消息内容、确认/取消按钮等配置项，并处理确认和取消的回调函数。这些代码可直接用于项目中的删除确认场景，实现开箱即用的效果。
2026-01-14 14:14:24
161
原创 Vue el-table 字段自定义排序（进阶）
本文介绍使用Element UI实现表格列动态显示和排序功能。通过el-dialog弹窗组件实现字段的可视化管理，包含以下核心功能： 弹窗组件提供字段勾选、上下排序功能 父组件接收排序后的字段数组 动态渲染el-table列显示顺序 关键实现点包括： 弹窗内使用el-table展示可排序字段列表 通过moveUp/moveDown方法实现排序功能 确认时emit排序结果给父组件 父组件根据返回数据动态渲染表格列 注意事项：需要完善复选框选中状态处理，并绑定实际业务数据。该方案实现了灵活配置表格列显示顺序的需
2026-01-13 11:21:18
423
原创 Vue el-table 字段自定义排序
本文介绍了使用Vue的el-dialog组件实现弹窗功能，通过showModal控制弹窗显示。弹窗内包含el-table展示列表数据，支持多选和排序功能：1) 通过type="selection"实现行选择；2) 提供上下移动按钮实现行排序；3) 在confirm方法中处理选中数据逻辑。代码演示了完整的实现过程，包括数据绑定、排序方法和样式调整，实现了交互式的表格数据管理和操作功能。
2026-01-13 10:38:34
126
原创 JS 判断两个数组内容相同
摘要：该代码实现了比较两个数组内容是否相等的功能。通过先比较数组长度，再对数组排序后逐个比较元素，忽略元素顺序差异。示例中比较了['张三','李四','王五']和['李四','王五','张三']两个数组，由于元素相同只是顺序不同，返回true。该方法适用于需要判断数组内容是否相同但不考虑元素顺序的场景。
2026-01-09 18:16:17
104
原创 JS 按照数组顺序对对象进行排序
本文介绍了在JavaScript中根据参考数组对对象属性进行排序的方法。通过创建sortObjectByArray函数，可以将对象键值按照指定数组顺序重新排列。文章还解决了Vue项目中调用hasOwnProperty可能遇到的ESLint报错问题，建议改用Object.prototype.hasOwnProperty.call方式替代直接调用原型方法，以避免因原型方法被重写而导致的问题。最后提供了修改后的完整实现代码，确保在Vue环境中能安全使用。
2026-01-09 18:12:45
404
原创 Vue.directive：自定义指令及传参
通过系统掌握自定义指令的开发技巧，开发者能够构建出更具交互性和可维护性的Vue应用。建议从简单功能开始实践，逐步掌握生命周期和参数传递的核心机制，最终实现复杂业务场景的高效封装。
2025-12-27 14:52:40
931
原创 Vue MutationObserver 监听
摘要：文章介绍了在前端开发中使用MutationObserver监听DOM样式变化的场景。在Vue3中，虽然可以通过Proxy监听对象变化，但当需要根据DOM元素样式变化来动态更新变量时，MutationObserver是更好的选择。文章提供了一个Vue组件示例，展示了如何通过MutationObserver监听对话框元素的style属性变化，当display属性变为"none"时更新isActive状态变量。这种方法适用于需要响应DOM属性变化的特殊业务需求。
2025-12-27 13:46:19
137
原创 JavaScript MutationObserver用法( 监听DOM变化 )
摘要：MutationObserver是JavaScript提供的强大API，用于高效监听DOM树变化。相比传统DOM事件，它采用异步批量处理机制，能监控节点增删、属性修改和文本变化等场景。文章介绍了其基础用法（创建实例、配置选项、停止监听）及典型应用：动态内容加载监控、属性变化响应、批量DOM操作优化、恶意脚本防护等。通过合理使用MutationObserver，开发者可以提升页面性能并增强代码健壮性，特别适用于需要实时响应DOM变化的现代Web开发场景。
2025-12-26 14:30:36
985
原创 Element-ui上传组件 before-upload文件校验失败会自动触发调用before-remove和on-remove钩子问题解决方法
在使用ElementUI的el-upload组件时，文件验证失败可能导致自动触发remove相关钩子函数。当before-upload返回false（如文件类型不符），组件会依次触发before-remove和on-remove方法。为避免误删已上传文件，可在remove钩子中检查file.status==="success"，仅对成功上传的文件执行删除操作。通过这种方式，可以有效区分验证失败的文件和已上传文件，确保删除逻辑的正确执行。
2025-12-26 10:52:51
133
原创 JavaScript去除对象字段空格
摘要：本文介绍了一个递归处理对象字符串字段的JavaScript函数trimObjectStrings。该函数能遍历对象所有字段，对字符串类型执行trim()操作去除前后空格，同时支持嵌套对象处理。函数会保留非字符串字段类型，避免处理null值时出错，适用于任意深度的嵌套对象结构，最终返回处理后的对象引用。
2025-12-12 13:47:00
100
原创 在Javascript中遍历一个树状结构数据而不使用递归来快速搜索目标节点
本文介绍了在JavaScript中非递归遍历树结构的三种方法：1. 使用队列实现广度优先搜索(BFS)，逐层遍历节点；2. 使用栈实现深度优先搜索(DFS)，模拟递归调用过程；3. 利用ES6迭代器和生成器遍历树节点。这些方法通过循环迭代替代递归，有效解决了大规模树结构遍历时可能出现的栈溢出问题，同时保持高效的搜索性能。其中栈实现的DFS最直观地模拟了递归调用，而BFS则采用队列实现层次遍历，迭代器方式提供了更现代的语法支持。
2025-12-08 11:31:06
348
原创 解决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
283
原创 el-input textarea 禁止输入中文字符，@input特殊字符实时替换，光标位置保持不变
在Vue的ElementUI中使用<el-input type="textarea">组件时，可通过两种方法实现输入内容实时替换且保持光标位置： DOM操作法：监听input事件，记录光标位置，替换内容后通过setSelectionRange恢复光标位置。适用于直接操作DOM的场景。 数据分离法：使用计算属性分离显示值和存储值，在input事件中处理文本并更新显示值，同时维护内部存储值。避免直接DOM操作，但实现稍复杂。 两种方法都支持在替换内容（如中文逗号转英文逗号）后保持
2025-09-11 17:07:59
334
原创 el-input 重写带图标密码框（点击小眼睛显示、隐藏密码）
摘要：本文介绍了如何扩展ElementUI密码输入框功能，使其在禁用状态下仍支持明文/密文切换显示。通过自定义v-model绑定、showPassword状态管理和后缀插槽，实现了点击图标切换显示效果，并提供了focus/blur事件处理来优化交互体验。文中包含完整的template模板、script数据逻辑和style样式代码，演示了如何覆盖官方组件限制，实现禁用状态下的密码显示控制功能。
2025-08-19 14:40:36
642
1
原创 Vue 利用el-table和el-pagination组件，简简单单实现表格前端分页
本文介绍了一个基于Element UI的el-table组件实现前端分页的demo。通过模拟100条数据，展示了如何在Vue项目中实现表格数据的前端分页功能。代码提供了完整的分页逻辑，包括页码切换、每页条数调整等核心功能，并封装了currentChangePage方法处理数据分页。该实现可直接复制使用，也可作为基础进行二次封装成可复用组件。文章还包含完整的HTML模板、JavaScript逻辑和CSS样式代码，方便开发者快速集成到项目中。
2025-08-11 16:55:22
428
原创 Vue2中，Promise.all()调用多个接口的用法
Vue中使用Promise.all()可以同时调用多个接口并统一处理结果。示例1展示了在mounted()中并行请求用户信息和订单列表，通过解构赋值存储数据；示例2则封装了相同接口不同参数的调用方式，支持条件查询和局部更新。两种方式都通过.catch()统一处理错误，其中第二种方式通过函数封装提高了代码复用性。Promise.all()需注意任一请求失败会导致整体失败，必须进行错误捕获。
2025-08-08 18:27:49
590
原创 使用 input 手动上传文件到服务器， 选择文件后再次修改文件再上传失败（ ＜input type=“file“ /＞ 自定义上传）
【摘要】文件上传功能存在浏览器安全机制导致的BUG：当用户修改已选文件后再次上传会报错。分析发现浏览器会阻止修改后的文件上传。提供两种解决方案：1）转Base64保持初始文件（不推荐，无法更新修改内容）；2）通过接口捕获错误提示用户重新上传（推荐）。代码实现展示了如何通过FormData提交文件，并利用FileReader检测文件变更，在错误时提示用户。该问题涉及浏览器安全策略，需通过前端交互设计妥善处理文件修改后的上传需求。
2025-08-06 11:22:24
448
原创 JS 在数组对象指定位置添加多个对象
本文介绍了在JavaScript数组中指定位置插入多个对象的四种方法：1）使用splice()方法直接插入；2）通过concat()合并数组；3）结合扩展运算符和slice()创建新数组；4）使用unshift()在开头插入。其中splice()是最直接有效的方法，而push()适用于末尾插入。每种方法都提供了代码示例，开发者可根据具体需求选择合适的方式操作数组。
2025-08-06 09:57:07
500
原创 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
517
原创 CSS 中aspect - ratio属性的用途及应用
CSS aspect-ratio 属性 是一种用于控制元素宽高比的新特性，允许开发者为任意元素（如图片、视频或容器）显式设置比例，确保在不同屏幕尺寸下保持一致的视觉效果
2025-06-23 16:47:07
705
原创 JS 大整数相加
在JavaScript中处理大整数相加时，由于JavaScript的Number类型是基于IEEE 754标准的双精度64位浮点格式，它只能安全地表示从-(2^53 - 1)到2^53 - 1（大约是-9007199254740991到9007199254740991）之间的整数。超出这个范围的整数在进行加法运算时可能会失去精度，导致不正确的结果。
2025-06-23 16:14:55
422
原创 Vue 比较两个数组对象，页面展示差异数据值
Vue 中使用 Lodash 的 differenceBy 函数可以方便地比较两个数组并找出它们的差异。
2025-06-20 17:00:42
630
原创 Vue 复制页面内容
在 Vue 2 中复制内容到剪贴板可以通过多种方式实现，但最常见和简单的方法是使用原生 JavaScript 的 document.execCommand('copy') 方法。然而，需要注意的是，从 Chrome 54 开始，execCommand('copy') 在非用户触发的情况下已经被废弃，这意味着你不能在事件监听器之外直接使用它。
2025-06-19 18:09:42
341
原创 js 两个数组按照第二个数组的顺序排序
本文介绍了在JavaScript中使用数组排序的几种方法：1）利用sort()和indexOf()按参照数组顺序排序；2）创建映射对象优化排序性能；3）处理参照数组中不存在的元素；4）扩展应用至对象数组排序，包括创建ID映射和使用findIndex()方法。文中提供了具体代码示例，展示了如何实现数组排序及处理特殊情况，如将不存在的元素排在最后。这些方法适用于需要按照特定顺序排列数组元素的场景。
2025-06-13 16:13:32
324
原创 ES6——数组扩展之Set数组
[...new Set()] 是一种在JavaScript中用于去重和展开集合的操作。具体来说，new Set() 创建一个新的 Set 对象，该对象存储的元素是唯一的，不会出现重复的值。通过使用扩展运算符（...），可以将 Set 对象中的元素展开成数组形式。
2025-06-06 17:38:32
683
原创 ES6——对象扩展之Set对象
ES6的Set对象用于存储唯一值，提供多种操作方法：add()添加元素（重复则不添加），delete()删除元素，has()检查存在性，clear()清空集合，size属性获取元素数量，forEach()遍历元素。示例展示了这些方法的用法，如创建集合、增删查操作以及遍历输出。Set对象为处理唯一值集合提供了简洁高效的解决方案。
2025-06-06 17:14:40
466
原创 js 比较两个对象的值,不相等就push对象的key
本文介绍了三种在JavaScript中比较对象值并找出差异key的方法：1) 通过JSON.stringify和简单遍历处理基本对象；2) 递归方法深度比较嵌套对象，并标记差异路径；3) 使用lodash库的isEqual和omitBy函数。方法适用于不同场景，从简单键值对到复杂嵌套结构。开发时可根据对象复杂度、是否允许使用第三方库等因素选择合适方案，其中递归方法能最精确地处理深度嵌套对象的差异检测。
2025-06-05 15:07:14
630
原创 js 比较两个对象的值是否相等
JavaScript对象比较方法摘要：对象直接比较(==/===)只能判断引用相等。值相等需属性比较：1)浅比较只检查顶层属性；2)深比较用递归处理嵌套对象；3)推荐使用lodash的isEqual函数处理复杂结构。浅比较适合简单对象，深比较确保嵌套属性正确对比，第三方库提供最完整解决方案。
2025-06-05 14:59:59
415
原创 js 字符串中的特殊字符全部替换成定义对象里面key对应的value值（进阶篇）
js 字符串中的特殊字符全部替换成定义对象里面key对应的value值
2025-05-12 16:07:09
447
原创 js 字符串中的特殊字符全部替换成定义对象里面key对应的value值（基础篇）
在JavaScript中，如果想要将字符串中的特殊字符替换成对象key对应的value，你可以使用String.prototype.replace()方法配合正则表达式来实现。这种方法非常灵活，可以让你定义一个查找模式（通常是特殊字符或字符串片段），然后提供一个函数或字符串来替换这些模式。
2025-05-12 14:27:23
361
原创 VUE el-select下拉框动态设置禁用，删除后恢复可选择
点击新增添加按钮，列表table会新增一条包含下拉菜单的数据，如果其中任何一个下拉框选择了某个值，那么新增的下拉菜单的选项中该值是禁用状态，只能选择其他未被选中过的值。点击删除按钮后，已禁用的选项放开，可再次选择。
2025-05-09 15:52:03
1303
原创 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
359
原创 Element-UI Message Box 使用$msgbox方法自定义模版内容，修改默认样式
Element-UI Message Box 使用$msgbox方法自定义模版内容，修改默认样式
2025-04-23 17:06:41
591
原创 VUE Element-ui Message 消息提示组件自定义封装
为了让message信息提示的更加方便快捷，减少不同地方的调用，避免代码的重复，特意再官方message组件的基础上二次封装，使代码更加的优雅和高效。
2025-04-23 16:00:18
495
原创 JS 浅析正则表达式
做数据的校验，就离不开正则表达式，现在网上常用的正则表达式都很全，很多都是开箱即用，非常方便和快捷，但是偶尔也会遇到那种很特殊的正则校验，如果能清楚的明白正则的校验规则，那么任何时候，面对任何需求，我们都会很轻松，从容而又优雅的写出所匹配的正则表达式，从此告别盲目的搜索！
2025-04-22 10:48:21
557
原创 Vue v-for 循环DOM 指定dom个数展示一行
这些方法都可以实现基于v-for循环的DOM元素按特定规则分行显示的效果。选择最适合你需求的方法。
2025-04-21 15:51:54
407
原创 js 两个数组中的指定参数（id）是否重复
在JavaScript中，如果想检查两个数组中的id或者其他指定的参数是否重复，有几种方法可以实现。这里已id作为指定参数，以下是几种常用的方法： 方法2：使用forEach和includes 方法3：使用Map（如果需要跟踪重复的对象） 方法4：使用reduce和Set（更简洁） 经常使用，所以记录一下~
2025-04-21 15:37:08
615
原创 ES6 Object.values 特定字段处理
以上方法可以根据具体需求选择使用。如果只需要几个特定的字段，直接通过属性访问或者使用reduce方法可能是最直接和高效的方式。如果需要更灵活的处理（例如，基于某些条件选择字段），那么使用filter或结合map的方法可能更合适。
2025-04-18 10:32:26
1070
Echarts 世界地图和主要国家的 JSON 文件
2023-12-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人