- 博客(121)
- 收藏
- 关注
RSS订阅原创 forEach不能用return中断循环，还是会走循环外的逻辑
【摘要】在forEach循环中直接使用return无法中断整个循环的执行，导致后续逻辑仍会被执行。正确的处理方式是在循环中设置标志位（如flag.value=true），然后在循环结束后根据标志位统一处理错误提示和返回。示例代码展示了如何通过flag.value标记不符合条件的项，最终在循环外统一进行错误提示和返回操作，确保逻辑正确执行。
2025-06-03 17:36:54
150
原创 vue3 ElMessage提示语换行渲染
ElMessage.error默认忽略换行符\n，要实现换行需使用<br>标签并开启dangerouslyUseHTMLString选项。例如：ElMessage.error({message:'发布失败！<br>'+data.msg,dangerouslyUseHTMLString:true})。这样就能显示多行错误提示信息。
2025-05-30 11:15:27
149
原创 vue3文本超出三行显示省略号，点击查看更多显示全部文本
摘要 本文实现了一个可折叠的文本显示组件，主要功能包括： 默认显示3行文本，超出部分显示"查看更多"按钮 点击按钮可展开/收起全文 通过计算元素高度和行高判断是否需要显示展开按钮 在弹窗打开和数据加载完成后才进行溢出检查 关闭弹窗时自动重置为收起状态 使用CSS实现文本省略和展开样式 该组件通过Vue3的composition API实现，封装了文本展示的常见交互需求。
2025-05-26 17:28:50
320
原创 git 报错：error: cannot lock ref ‘refs/remotes/origin/dev/cib‘: ‘refs/remotes/origin/dev‘ exists； canno
在使用 Git 时遇到 "cannot lock ref 'refs/remotes/origin/dev/cib': 'refs/remotes/origin/d" 这样的错误，通常是因为在尝试推送或拉取远程分支时，本地分支的名称与远程分支的名称冲突或不正确。这里我是用了git remote prune origin后，再git pull 就可以正常拉取了。将同时获取最新的远程仓库数据并删除任何过时的远程跟踪分支。只专注于删除过时的分支，不会获取新的远程仓库数据。
2025-05-06 15:53:16
379
原创 el-dialog弹窗关闭时调了两次刷新数据的接口
弹窗是父组件通过dialog调用子组件的方式，然后在弹窗里面修改完内容，点击关闭按钮时，需要刷新父组件列表数据。但是调了两次刷新列表的接口。建议关闭的时候不要调取刷新数据的接口，因为如果在弹窗里面啥操作都不做，关闭时还刷新数据就不太友好。建议在保存或者提交的时候刷新数据。通过函数防抖就能防止关闭弹窗时调取两次刷新数据的接口。子组件通知父组件刷新数据。
2025-04-28 18:53:07
370
原创 父组件弹窗关闭时更新子组件的某个属性改为false
父组件弹窗关闭时更新子组件的某个属性改为false（子组件里面表单的展开/收起按钮），以及父组件的dialog的关闭按钮2、定义showPerformanceList 3、父组件关闭弹窗时修改showPerformanceList 的状态为false 子组件：4、子组件defineProps接收showPerformance5、子组件挂载完成时更新showPerformanceList.value的值为父组件传过来的值6、子组件监听OBJECT_ID变化时，
2025-04-23 09:47:11
207
原创 vscode 编辑器代码块展开收起不见了
编辑器找到设置 ——> 输入框查找folding ——> 找到 Editor: Folding Strategy ——> 下拉框选择 indentation。
2025-04-17 17:15:33
356
原创 vscode使用Linux的vi命令改错怎么回退
使用撤销命令：在插入模式下，按下`Esc`键返回命令模式，然后按下'u'键，每按一次u键，就能撤销一次编辑，直到回到最初修改之前。（正常模式下，按下`Ctrl + r`键，即可恢复被撤销的操作，每按下一次Ctrl + r键，就可以恢复一次被撤销的操作。`后按下回车，即可退出vi而不保存对文件的修改。2、使用恢复命令：在插入模式下，按下`Esc`键返回命令模式，然后输入`Ctrl + r`命令，即可恢复被撤销的操作。（正常模式下，直接按下u键，即可撤销上一次的编辑操作，每按一次撤销一次修改）
2025-04-15 09:27:58
301
原创 vue3开发问题解决：[Vue warn]: Invalid prop: type check failed for prop “menuWidth“. Expected N
如果menuWidth本身可以接受带单位的字符串（如"124px"），你可以直接修改propsprops: {然后在组件内部根据需要处理这个字符串值。这个警告的根本原因是传递给menuWidth的值类型不符合组件的期望。解决方法包括：确保传递的值是数字类型。在父组件中解析字符串为数字。在子组件中处理字符串值并解析为数字。调整props的定义以接受字符串类型。根据你的具体需求选择合适的方法。这里我用了方法1去解决。
2025-03-13 09:54:30
603
1
原创 git报错：“fatal:refusing to merge unrelated histories“
拒绝合并无关的历史” 是 Git 在合并无共同祖先的分支时的保护机制。根据你的需求，可以选择强制合并、重新初始化仓库、创建新分支或使用变基等方法解决问题。如果不确定操作的后果，建议先备份重要代码，避免数据丢失。
2025-03-12 10:08:55
4087
原创 前端页面报警告：runtime-core.esm-bundler.js:40 [Vue warn]: injection “Symbol(pinia)“ not found.
完整示例'app',sidebar: {...},...}),actions: {...})
2025-03-07 16:33:40
664
原创 前端页面报错： [Vue warn] Set operation on key “eventCallBks“ failed: target is readonly.
这表明你在尝试修改一个被标记为只读（readonly）的属性。
2025-03-07 16:08:05
605
原创 前端页面报 [Vue warn]: Invalid prop: custom validator check failed for prop “pagerCount”.
如果在某些情况下（例如组件重新渲染时）值被错误地覆盖或解析为其他类型，仍可能触发警告。所以全局搜索 pager-count，盲猜一定是有赋值不在5-21之间的奇数的范围的。即使 pager-count="7"写死为7，还是报那错误；Element Plus 的。：必须是大于等于 5 的奇数。
2025-03-07 15:35:46
872
原创 vue3问题警告解决：传递给组件的某些非 props 属性（例如 class、id 等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点
一些开发工具（如 Vue Devtools）可能会使用组件的名称来提供更好的调试支持。：Vue 3 允许组件返回多个根节点（即片段），但片段无法自动继承父组件传递的非。等）无法被自动继承，因为该组件渲染的是片段（fragment）或文本根节点。：如果你的组件需要递归调用自身，Vue 需要知道组件的名称。如果可能，确保组件的模板只有一个根节点。中不是必需的，但它可以帮助你更好地组织代码，尤其是在大型项目中。在 Vue 3 中，当组件的模板有多个根节点（例如使用了。如果可能，确保组件的模板只有一个根节点。
2025-03-06 09:15:16
2297
3
原创 git cherry-pick - 从另一个分支中选取特定的提交（commit），并将它们应用到当前分支
命令，它允许你从另一个分支中选取特定的提交（commit），并将它们应用到当前分支。这个命令在多个场景下都非常有用，比如当你想要将一个特性分支上的某个特定更改应用到主分支，但又不想合并整个分支时。
2025-03-04 10:11:32
1551
原创 vue3代码解读：列表拖拽排序
返回值类型返回的是被删除的单个元素。返回的是一个包含被删除元素的数组。使用场景如果你需要直接操作被删除的单个元素，使用。如果你需要处理多个被删除的元素，或者需要保留返回的数组形式，使用。
2025-02-10 11:25:46
1162
原创 vue代码片段解读
函数是一个有效的实现，用于生成一个 16 字节的随机盐值，并将其转换为 32 位的十六进制字符串。这个盐值可以用于密码哈希等安全相关的操作。如果你在 Node.js 环境中运行代码，可以使用 Node.js 的crypto模块来生成随机字节。希望这些信息对你有所帮助！
2025-02-07 16:34:03
305
原创 git撤销上一次的提交
这个操作可以保留之前的提交和当前的修改。最近一次的提交到本地的修改的提交会回到暂存区，而当前的修改不会动。撤销最近修改（不保留修改）
2025-02-07 14:25:09
1210
原创 vue3表格数据分2个表格序号连续展示
this.tableData.slice(0, Math.ceil(this.tableData.length / 2))，也就是slice(0, 1)，也就是切割到唯一一条数据。包含 6 条数据，第一个表格显示前 3 条，第二个表格显示后 3 条。，我们希望在第一个表格中展示前半部分的数据，第二个表格中展示后半部分的数据。当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。当数据为单数时，第一条数据会切割到了右边表格，左边表格无数据。所以有且仅有一条数据时，就跑到了右边表格，左边表格没数据。
2025-01-24 17:14:27
1581
原创 vue3阻止事件冒泡到父元素
使用.stop修饰符：最简单直接的方式。在事件处理函数中调用：提供更灵活的控制。使用.self修饰符：限制事件仅在元素本身触发。使用.capture和.stop组合：适用于复杂场景。选择哪种方法取决于你的具体需求和场景。
2025-01-24 16:18:46
1214
原创 vue3实际开发bug解决
问题出在 componentName 的解构和赋值操作上。你尝试将一个字符串赋值给 ref 的 .value 属性，这导致了错误。ref 是 Vue 3 中用于响应式引用的工具，它返回一个对象，该对象的 .value 属性用于存储实际的值。不要对componentName解构赋值，直接赋值。
2025-01-21 15:33:05
347
原创 vue3代码优化：工厂函数优化
在这个案例中，使用了一个对象来存储每个type对应的构造函数。这样，就不需要使用switch语句，而是直接通过type来获取对应的构造函数。如果type不存在于对象中，就抛出一个错误。注意，这个示例假设cardType是一个枚举或对象，包含了所有可能的类型。如果你的代码中cardType是以不同的方式定义的，你可能需要相应地调整这个示例以适应你的代码基础。此外，如果你使用的是 TypeScript，你可以通过类型注解来进一步优化这个工厂函数。
2024-12-12 17:14:20
167
原创 动静分离具体是怎么实现的？
动静分离是指将网站的静态资源（如图片、CSS、JavaScript 文件）与动态内容（如 PHP、Python 等服务器端脚本生成的内容）分开处理。这样做可以使得静态资源被更快地加载，因为它们不需要经过后端服务器处理。在 Nginx 中实现动静分离是一种常见的优化手段，用于提高网站的性能和可扩展性。动静分离是提高网站性能和可维护性的重要策略，通过合理配置 Nginx，可以有效地实现这一目标。在这个配置中，静态资源被放置在。目录下，而动态请求被转发到。
2024-11-27 11:10:25
471
原创 10个高级JavaScript技巧
这可以极大地简化高度可重用实用函数的创建，使您的代码库更整洁且更易于维护。提供了一种强大的机制来控制和自定义模板字面量的输出，实现更安全和更灵活的模板创建。这可以显著提高具有繁重计算的函数的性能，特别是那些频繁使用相同参数调用的函数。通过使用别名，您可以避免名称冲突，并提高代码的清晰度，使其更易于处理复杂的数据结构。通过确保函数以受控的间隔调用，防止性能问题，减少浏览器的负载并提供更好的用户体验。如果没有记忆化，对斐波那契函数的每次调用都会多次冗余地计算相同的值，导致指数级的时间复杂度。
2024-11-26 16:58:30
933
原创 前端code review：代码报错捕获、兼容错误、代码规范处理
当你访问基本类型的属性或方法时，JavaScript 会自动将基本类型装箱为其对应的对象类型。这个临时的对象允许你访问属性和方法，但它是短暂的，一旦属性或方法访问完成，这个对象就会被销毁。同样道理，只要变量能被转成对象，就可以使用对象的方法，但是 undefined 和 null 无法转换成对象。null 是一个特殊的基本类型，当尝试访问其属性时会报错，因为 null 不能被装箱为对象。解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象(装箱)。第二种情况，虽然给了默认值，但是依然会报错。
2024-11-26 15:58:33
790
原创 为什么要用 ??=
这种精确性能够有效避免使用更宽泛检查带来的潜在问题。在构建用户界面或处理表单数据时，我们通常希望保留这些“假值”而不是将它们替换为默认值。），它才会赋予默认值，因此适用于保留有效的 0、空字符串或。仅当变量真的是“没有值”时（即。时才会赋予它一个默认值。
2024-11-26 09:26:28
149
原创 JS常见的问题-面试题-实际开发问题：可变性，var 和 变量提升，偶然性全局变量，闭包，对象，this，强制转换， 异步，函数，原型
，这些都是不可变的。这意味着一旦分配了一个值，我们就无法修改它们，我们可以做的是将它重新分配给一个不同的值（不同的内存指针）。另一方面，其他数据类型（如 Object 和 Function）是可变的，这意味着我们可以修改同一内存指针中的值。函数总是同步的，不管每个循环是同步的还是异步的，这意味着每个循环都不会等待另一个。字符串是不可变的，因此一旦分配给一个值，就不能将其更改为不同的值，您可以做的是重新分配它。关键字声明的函数可以提升函数语句，但是不能提升箭头函数，即使它是使用。
2024-11-22 11:21:00
607
原创 JS新功能之：全新 Set 方法
目前，这些新方法已被主流浏览器普遍支持。：判断第一个集合是否是第二个集合的子集。：判断第一个集合是否是第二个集合的超集。：返回第一个集合与第二个集合的差集。JavaScript 的内置。：判断两个集合是否不相交。：返回两个集合的对称差。：返回两个集合的交集。：返回两个集合的并集。
2024-10-28 16:26:49
319
原创 JS新功能：Promise.try
如果f是同步函数并返回一个值，则Promise.try会返回一个解析为该值的Promise。如果f是异步函数并返回一个Promise，则Promise.try会返回该Promise并保持其状态。：：在实际编程中，经常遇到需要处理一个函数f，这个函数可能是同步的，也可能是异步的（即返回Promise）。在这个示例中，函数asyncF是异步的，并返回一个在1秒后解析的Promise。不同的是，使用Promise.try时，如果f是同步函数，它会在当前事件循环中立即执行，而不是在下一个事件循环中。
2024-10-28 16:24:22
683
原创 判断数组arr1中是否包含和数组arr2的FieldName名称一样的，包含返回true，不包含返回false
判断数组arr1中是否包含和数组arr2的FieldName名称一样的，包含返回true，不包含返回false为了判断数组arr1中是否至少有一个元素的与数组arr2中的任意一个FieldName相同，你可以使用方法结合方法来实现。
2024-10-11 16:27:15
687
原创 vue3中，拦截双击事件的第一次点击，写一些逻辑
开发案例中，到目前为止，可以成功拦截第一次点击，但是需要注意的是，需要双击的频率在合适（双击频率要在300ms内点击第二次）的情况下才会拦截第一次点击，在里面写你要的TODO逻辑即可。如果需要每次双击都拦截到第一次点击，可以调一下定时器的时间即可，可以调到500ms，一般人双击的频率都可以在500ms点击第二次。在 Vue 3 中，如果想要拦截双击事件的第一次点击并执行一些逻辑，你可以使用一个状态变量来跟踪第一次点击事件，并在第二次点击时阻止第一次点击逻辑的执行。
2024-10-11 10:19:58
721
原创 Object.values() 、 Object.keys()
只能获取对象自身的可枚举属性值，不会获取继承的属性值。如果你的对象中包含了嵌套对象，那么返回的数组将只包含嵌套对象的引用，而不是嵌套对象的值。如果你需要递归地获取所有嵌套对象的值，你可能需要编写一个递归函数来实现这一点。这样，如果对象中有多个相同的值，你就能获取到所有对应的键。在 Vue 3 的组合式 API 中，如果你有一个响应式对象，例如。如果你需要在 Vue 组件中获取响应式对象的值，你可以使用同样的。的所有键，并检查每个键对应的值是否等于我们想要找的值。一旦找到匹配的值，我们就得到了对应的键。
2024-09-30 17:05:29
846
1
原创 自定义验证器函数
组件，来确保用户输入的数据符合特定的要求。例如，你可能不希望用户在某些输入字段中使用特定的关键字，因为这些关键字可能是保留字或有特殊意义。这个验证规则对象通常用在表单组件中，例如 Element Plus 的。
2024-09-30 16:58:30
704
原创 已知有一个对象，通过对象的值拿到对象的键
函数返回一个数组，包含所有与目标值相匹配的键。这样，如果对象中有多个相同的值，你就能获取到所有对应的键。函数遍历对象的键，并检查每个键对应的值是否等于目标值。如果找到匹配的值，函数返回对应的键。函数接受两个参数：一个对象。
2024-09-30 16:52:00
257
Vue.js devtools 6.0.0 beta 21
2024-07-04
Cookie-Editor 1.12.2
2024-07-04
2024前端面试八股文
2024-04-23
2024年前端工程师面试题
2024-04-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人