- 博客(448)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 路由视图刷新（无白屏）
在Vue项目中实现无白屏路由刷新，可以通过动态修改router-view的key来触发组件重新渲染。在App.vue中，将router-view的key绑定到$route.fullPath和一个自定义的reloadKey变量，通过provide/inject机制向子组件提供reload方法。当调用reload()时，递增reloadKey值，强制Vue重新创建组件实例，实现无缝刷新。这种方法避免了传统页面刷新的白屏现象，提升了用户体验。
2025-11-19 11:00:41
85
原创 ElMessageBox设置里面的确认、取消按钮样式大小为default
本文介绍了如何设置ElMessageBox弹窗中确认和取消按钮的默认样式大小。通过添加buttonSize:'default'配置项，可以保持按钮的标准尺寸。示例代码展示了一个删除确认弹窗的实现，包含确认删除和取消操作的回调处理，以及删除成功后的提示信息显示。该设置适用于需要保持UI组件样式一致性的场景。
2025-10-20 13:38:53
280
原创 npm error peer eslint-plugin-n@“^15.0.0 || ^16.0.0 “ from eslint-config-standard@17.1.0 npm error
摘要：npm报错显示eslint-plugin-n与eslint-config-standard存在版本冲突。错误原因是当前安装的eslint-plugin-n版本不符合eslint-config-standard@17.1.0要求的"^15.0.0 || ^16.0.0"版本范围。解决方案是将eslint-plugin-n版本调整为兼容版本，如"^16.6.2"。这种版本不匹配问题在依赖管理中常见，通过调整子依赖版本即可解决。
2025-10-18 16:07:05
167
原创 vue3+vite创建的项目，运行后没有 Network地址
本文介绍了如何修改 Vite 配置文件以启用网络访问功能。主要内容包括：在项目根目录找到 vite.config.js/ts 文件，通过添加 server.host: '0.0.0.0' 配置来开放网络访问，同时可指定端口号。修改后开发服务器将允许同一局域网内的设备访问。
2025-10-18 14:45:29
389
原创 vscode无法执行npm命令，一执行就报错
摘要： 解决PowerShell中npm脚本执行被阻止的问题。当系统显示"禁止运行脚本"错误时，需修改执行策略：1)以管理员身份启动PowerShell；2)输入Get-ExecutionPolicy检查当前策略；3)使用Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned调整为安全级别；4)按Y确认后，关闭终端重新测试npm命令。此方法在保留系统安全性的同时允许运行必要脚本，适用于VSCode等开发环境
2025-10-18 14:35:43
617
原创 vue3 ＜el-image 的:src=“event.fileName[0]“ 长度为 “0“ 的元组类型 “[]“ 在索引 “0“ 处没有元素。
在Vue3中使用el-image组件时，当直接访问event.fileName[0]可能会因空数组而产生类型警告。通过添加v-if判断数组长度虽能避免运行时错误，但TypeScript仍会提示类型问题。解决方案是将直接索引[0]改为使用响应式变量imgIndex（初始值为0），即event.fileName?.[imgIndex]，这样既保持功能不变，又消除了类型警告。这种写法更符合TypeScript的类型安全要求，同时保留了原有的空值处理逻辑（使用默认图片）。
2025-09-19 17:05:34
261
原创 https://esgf-node.llnl.gov/search/cmip6/ 做一行展示不下做省略号处理的时候，-导致链接中的后半部分整个不显示
摘要：当长URL包含连字符时，使用CSS的text-overflow: ellipsis可能导致后半部分内容完全消失。问题示例为"https://esgf-node.llnl.gov/search/cmip6/"链接。解决方案包括调整CSS属性：设置display: inline-block，结合word-break: break-all强制在任何字符处断行，并配合overflow: hidden和white-space: nowrap确保单行显示。核心在于处理连字符被误认为断点的行为，
2025-09-12 11:07:43
501
原创 ＜input hidden id=“file-template“ type=“file“＞点击一次上传文件后，再次点击，@change不生效，现在想，再次点击上传文件后替换当前文件
摘要 解决文件上传input重复点击无效问题：通过重置input的value属性实现重复上传。在@change事件处理函数中，获取文件后执行event.target.value = ''清空已选文件，确保下次点击能触发change事件。示例代码展示了在Vue组件中实现该功能的方法。
2025-09-12 10:42:57
194
原创 vue3 ul li 中文字超出指定行数显示省略号的时候才使用el-tooltip进行文字提示
摘要：本文展示了一个Vue3实现，在ul列表中当li元素内的文本超出指定行数时显示省略号，并仅在此时启用el-tooltip提示。关键点包括：1) 使用-webkit-line-clamp限制行数；2) 通过scrollHeight和clientHeight比较检测文本溢出；3) 动态绑定tooltip显示状态；4) 利用绝对定位使tooltip覆盖整个文本区域。实现方式简洁高效，完美解决了长文本显示与用户提示的交互需求。
2025-09-04 11:23:42
219
原创 vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
Vue3+TS中数组类型"never"问题的解决方案 当在Vue3中使用TypeScript声明响应式数组时，如果未明确定义类型，空数组会被默认推断为never[]类型，导致后续无法添加boolean等具体类型值。 解决方法： 使用reactive时明确指定数组类型： const arr = reactive([]); 确保数组初始化时包含类型信息 这能避免类型推断错误，使数组能正确接收boolean等指定类型的元素。
2025-09-04 11:21:19
271
原创 vue3+ts:el.scrollHeight 提示类型“never”上不存在属性“scrollHeight”。
在Vue3+TS项目中，当使用el.scrollHeight时出现类型"never"错误，可通过两种方式解决：1) 使用类型断言as HTMLElement；2) 明确定义ref数组类型为HTMLElement[]。示例代码展示了第二种方案，通过ref<HTMLElement[]>([])声明textRefs，并在checkOverflow方法中安全访问scrollHeight属性来检测文本溢出情况。注意使用nextTick确保DOM更新后再进行操作。
2025-09-04 11:14:23
367
原创 vue3，:ref=“(el) =＞ (textRefs[index] = el)“ 报错不能将类型“Element | ComponentPublicInstance
在Vue3中使用ref回调时，可能会遇到类型不匹配的错误。当将元素引用存储在数组中时，TypeScript会提示类型不兼容，因为ref回调可能返回Element、ComponentPublicInstance或null类型，而我们需要的是HTMLElement类型。解决方法是在赋值时使用类型断言，明确指定el为HTMLElement类型：:ref="(el) => (textRefs[index] = el as HTMLElement)"。这样可以避免TypeScript的类型检
2025-09-04 11:09:22
238
原创 vue-router.mjs:51 [Vue Router warn]: Record with path “/metadataManage/network“ is either missing a
【Vue Router警告处理摘要】系统检测到Vue Router配置存在路径'/metadataManage/network'的路由记录缺少必要属性。根据规范，每个路由必须包含component或children属性。常见原因是组件路径配置错误，例如动态导入时路径中误写双斜杠"//"。典型错误如：component: () => import('@/views//Network.vue')，正确应为单斜杠路径。该警告提示开发者需检查路由配置中组件路径的准确性。（98字）
2025-08-19 17:44:46
452
原创 ＜el-table设置每一行的鼠标样式为小手
摘要：通过el-table的cell-style属性，可以自定义表格单元格样式。示例中使用rowStyle方法返回{cursor:'pointer'}，将表格每行的鼠标指针设为小手形状，表示该行可点击。这种设置方式简单高效，适用于Vue+Element UI项目，提升用户交互体验。
2025-08-19 16:13:23
146
原创 vue 循环遍历数组 每隔五个终止一段时间后再次开始遍历
文章摘要： 在Vue中实现数组分批处理（每5个元素暂停100毫秒），可通过异步循环配合Promise定时器实现。示例代码展示了一个文件上传方法，在遍历文件数组时，每处理完5个文件就通过setTimeout暂停100毫秒（使用await new Promise）。关键点在于利用取模运算total % 5判断批次，并通过异步等待控制流程节奏。这种技术适用于需要控制请求频率或分批处理大量数据的场景。
2025-08-19 15:47:21
135
原创 error when starting dev server: TypeError: crypto$2.getRandomValues is not a function at resolve
摘要：该错误是由于Node.js版本过低（低于18.x）导致Vite开发服务器无法正常启动，特别是crypto模块的getRandomValues功能缺失。解决方法是升级Node.js至v18或更高版本，可通过nvm命令安装并切换至Node.js 18.x版本来修复此问题。
2025-08-19 10:11:10
472
原创 vue2 el-table点击行，并高亮当前行
摘要：本文展示了在Vue2中使用Element UI的el-table实现点击行高亮效果的方法。通过@row-click事件绑定handleRowClick方法记录当前行ID，利用row-class-name属性动态添加highlight-row类名，配合scoped样式中的::v-deep深度选择器修改选中行的背景色。代码简洁清晰地实现了表格行点击高亮功能，适用于需要突出显示当前选中行的场景。
2025-08-07 17:04:32
824
原创 vue2 生成n个随机颜色且不生成指定颜色
本文介绍了一个Vue2方法，用于生成n个不包含指定颜色的随机十六进制颜色。核心方法generateRandomColor()通过循环生成随机颜色（格式#RRGGBB），直到颜色不等于#00bbff（忽略大小写）。generateColors(n)方法则调用前者生成指定数量的随机颜色数组，并包含输入验证。该方法简单实用，适用于需要排除特定颜色的随机颜色生成场景。
2025-08-07 17:00:08
445
原创 vue2 ＜el-select修改下拉宽度，超出部分在鼠标悬浮的时候显示完整
摘要 在Vue2的Element UI中，通过设置:popper-append-to-body="false"可控制下拉框不追加到body。为优化长文本显示，使用<el-tooltip>实现悬浮提示功能：通过checkOverflow方法检测文本是否溢出（比较scrollWidth和clientWidth），若溢出则在鼠标悬浮时显示完整内容。这种方案有效解决了下拉选项宽度限制下的内容展示问题。
2025-08-04 09:51:56
322
原创 error when starting dev server: TypeError: crypto$2.getRandomValues is not a function at resolve
Vite开发服务器启动失败，报错"crypto.getRandomValues is not a function"。该错误通常是由于Node.js版本过低导致。解决方案是升级Node.js版本，确保使用支持最新加密API的Node版本即可解决此问题。
2025-07-31 22:07:12
267
原创 vue面试题
本文摘要介绍了前端开发中三个常见技术要点：1) Echarts常用组件包括标题、工具栏、提示框等可视化元素；2) Uni-APP的分包机制优化小程序性能，实现按需加载；3) Webpack打包原理及优势，包括模块化处理、依赖分析、代码拆分等，以及Babel在转译中的作用。内容涵盖数据可视化、小程序开发和前端工程化三个技术方向的核心概念。
2025-07-31 10:21:20
155
原创 el-table获取当前勾选的数据信息，判断是勾选还是取消勾选
本文介绍了Element UI表格组件中多选功能的实现方法。通过@selection-change事件获取当前选中数据，记录选中总数；利用@select事件处理单选操作，通过判断当前行是否在选中数组中区分勾选/取消勾选。代码展示了如何获取操作行数据并打印日志，注释部分还提供了往自定义数组添加/移除选中项的实现思路（需自行取消注释使用）。
2025-07-30 17:52:23
354
原创 vue面试题
本文总结了Vue开发中的常见问题与解决方案，包括：路由刷新重载、Vuex数据持久化、computed与watch区别、Vuex使用场景、双向绑定原理、虚拟DOM与Diff算法、Vue与jQuery对比、组件封装规范、Vue2与Vue3核心差异等。重点涵盖了性能优化技巧（懒加载、CDN、SSR）、首屏优化手段，以及Vue3的Proxy优势。同时探讨了Nuxt.js服务端渲染对SEO的优化作用，提供了项目文件规划建议，完整呈现了Vue技术栈的关键知识点和最佳实践。
2025-07-29 20:58:44
841
原创 根据地图平移，改变地图弹窗位置，调整锚点显示问题，解决地图层级改变产生偏移量问题
本文提出了一种地图弹窗位置自动优化方案，通过监听地图移动事件实时调整弹窗显示位置。核心方法包括：1) 计算弹窗8个可能锚点的位置；2) 评估每个锚点的可视区域溢出量；3) 优先选择上下方向的锚点；4) 根据最佳锚点动态调整偏移配置。技术实现上采用容器边界检测、安全边距设置和坐标转换，确保弹窗始终保持在可视范围内。该方案通过事件总线通知组件更新，有效解决了地图平移时的弹窗定位问题，具有定位精准、响应及时的特点。关键代码展示了从事件监听到位置计算、锚点选择及最终定位的完整流程。
2025-07-29 17:12:29
263
原创 UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token ‘??=‘ at Loader.moduleStrategy (
Node.js错误提示未处理的Promise拒绝警告，显示语法错误"Unexpected token '??='"，这表明当前Node版本不支持该运算符。这类错误通常由未捕获的异步异常或未处理的Promise拒绝导致。解决方案是切换Node版本，因为不同版本对ES新特性的支持不同。建议使用较新的Node版本（如18+）以支持??=等现代语法，同时确保正确处理Promise拒绝，或通过--unhandled-rejections=strict标志强制终止进程。
2025-07-28 19:43:53
421
原创 不能将类型“ComputedRef＜string＞”分配给类型“string | number”。ts-plugin(2322) global.d.ts(100, 2): 所需类型来自属性 “labe
TypeScript类型错误解决方案 当遇到"不能将类型ComputedRef<string>分配给类型string | number"的错误时，问题在于Vue3的computed返回的响应式引用与原始类型不匹配。解决方法是在使用computed值时添加.value获取实际值。 示例代码： options: [ { value: 0, label: computed(() => t('message.personalDataset.observeDataResult')).v
2025-07-11 10:33:14
372
原创 maptalks限制地图拖动范围
maptalks可以通过设置maxExtent参数限制地图的拖动范围。示例代码中，将maxExtent设置为[0, -90, 360, 90]，定义了地图可拖动区域的边界坐标（最小经度0，最小纬度-90，最大经度360，最大纬度90）。这样地图将无法被拖出设定的经纬度范围，同时配合minZoom:3设置了最小缩放级别。该方法适用于需要控制地图显示区域的场景，如全球地图或特定区域地图的展示。
2025-06-18 17:59:00
186
原创 vue3 根据当前屏幕宽度整体缩放界面
摘要：Vue3实现根据屏幕宽度整体缩放界面并保持高度自适应的方案。通过监听窗口resize事件，计算当前宽度与设计稿基准宽度(1920px)的比例作为缩放系数。使用transform:scale实现整体缩放，transformOrigin设置为左上角定位。高度通过窗口实际高度除以缩放系数动态计算，实现高度自适应。组件挂载时初始化并添加resize监听，卸载前移除事件监听。这种方法适用于大屏在不同分辨率下的适配需求。
2025-06-18 11:27:12
689
原创 根据地图平移，改变地图弹窗位置，调整锚点显示问题
文章摘要： 本文介绍了一种地图弹窗位置自动调整的方法。通过监听地图移动事件，在每次移动结束后调用adjustPopupAnchor函数重新计算弹窗位置。该方法考虑了弹窗大小、容器边界和安全边距，自动选择最佳锚点位置（包括8种可能方向），计算每个锚点的溢出量，优先选择上下方向的锚点。最后应用新的偏移配置更新弹窗位置，并通过事件总线通知其他组件。该方案有效解决了地图平移时弹窗显示位置不当的问题，确保弹窗始终保持在可视区域内。
2025-06-17 17:12:20
320
原创 将Vue文件集成到Maptalks的InfoWindow中
摘要：本文介绍了如何在Maptalks地图中实现Vue组件动态集成到InfoWindow的方法。通过Vue.extend()动态创建组件实例，将渲染后的DOM注入InfoWindow的内容属性。关键步骤包括：1)导入Vue组件；2)创建Vue实例并传递props；3)设置InfoWindow参数；4)处理窗口关闭时的实例销毁。此方法实现了Vue组件与Maptalks信息窗口的无缝集成，同时考虑了性能优化和事件处理。(150字)
2025-06-17 17:00:54
211
原创 Monaco Editor实现ctrl+v粘贴时进行代码格式化
摘要：通过Monaco Editor的addAction方法实现Ctrl+V粘贴时自动格式化代码。代码示例展示了如何添加自定义快捷键操作，在粘贴内容后延迟100毫秒触发文档格式化。该方法先执行系统默认粘贴操作，再调用格式化功能，为代码编辑提供了便捷的格式处理。实现原理是利用setTimeout延迟执行格式化命令，确保粘贴内容完整后再进行格式化处理。
2025-06-10 13:32:30
279
原创 Monaco Editor实现ctrl+s保存后进行代码格式化
摘要：通过Monaco Editor的addAction方法实现Ctrl+S快捷键保存时自动格式化代码。代码示例展示了如何创建一个格式化并保存的动作，其中使用keybindings设置快捷键组合(CTRL+S)，在run方法中调用editor.trigger触发格式化操作。该方法可替代默认保存行为，在保存前先执行代码格式化，但示例中保存函数(saveContent)被注释，需要开发者自行实现实际保存逻辑。
2025-06-10 13:30:50
160
原创 monaco-editor添加 MATLAB 语言支持
摘要：本文展示了如何在 Monaco 编辑器中对 MATLAB 语言进行语法配置，包括注册语言、设置注释规则、括号匹配和缩进规则，并实现基础语法高亮。配置内容包括：使用 % 和 %{%} 作为单行和多行注释标记，定义 MATLAB 关键字（如 if/for/function 等）和缩进规则（根据控制结构自动调整），以及基本的数字和标识符识别。该配置为 MATLAB 代码提供了基本的编辑器支持功能。
2025-06-09 17:19:34
251
原创 TypeError: editor.addEditorAction is not a function
文章摘要：Monaco Editor新版已弃用旧API addEditorAction()，改用addAction()。为解决项目中新旧API冲突问题，提供替代方案示例。新方法通过addAction()注册编辑器动作，包含ID、标签、快捷键绑定及运行逻辑（如格式化文档）。代码片段展示了如何将Ctrl+S快捷键绑定到格式化保存操作，同时注释了潜在的保存功能调用。该方案解决了API兼容性问题，同时保持了原有功能。
2025-06-09 16:58:49
170
原创 CSS3前端入门（第三天）2D转换 transform
摘要：CSS3的transform属性可实现元素的2D变换效果，主要包括位移(translate)、旋转(rotate)和缩放(scale)。其中，translate移动元素位置，参数可用百分比（相对于元素自身尺寸）；rotate使元素在平面内旋转，角度单位为deg。通过transform可实现精准定位，如元素垂直水平居中（结合定位和translate(-50%,-50%)）。这些变换效果不改变文档流位置，是CSS3最具突破性的特性之一。
2025-05-30 14:50:55
357
1
原创 vue3 form表单校验配置message中英文，且提示信息根据语言进行变化
摘要：本文介绍在Vue3中使用computed实现表单校验信息的国际化切换。通过vue-i18n的useI18n获取翻译函数t，将校验规则中的message属性设为computed属性，动态返回对应语言的提示信息。示例以dataProductGrade字段为例，当语言变化时，校验提示会自动切换为t('message.rules.dataProductGrade')返回的相应语言内容，实现了blur和change事件的校验功能。这种方法简洁高效地解决了多语言表单校验需求。
2025-05-29 17:20:20
277
原创 vue3 打开txt或者png链接不要预览直接实现下载
Vue3实现文件下载（不预览直接下载）的方法摘要：通过fetch获取文件内容并转换为Blob对象，然后使用URL.createObjectURL生成临时链接。创建一个a标签，设置其href为Blob URL和download属性为文件名，触发click事件实现下载。最后调用URL.revokeObjectURL释放内存。支持txt/png等文件格式，避免浏览器预览直接下载。代码简洁高效，约150字。
2025-05-29 15:59:12
173
原创 vue3请求设置responseType: ‘blob‘,导致失败后获取不到返回信息
摘要 在Vue3中设置responseType: 'blob'请求时，失败响应无法直接获取错误信息。通过FileReader可解析错误响应：首先检查响应类型，若为JSON则使用FileReader读取Blob数据并解析JSON内容；成功响应则处理文件下载。该方法有效解决了blob响应无法直接获取错误信息的问题，同时保持正常文件下载功能。<｜end▁of▁sentence｜>
2025-05-21 17:26:18
398
原创 vue3年月日时分秒格式的时间，获取开始时间和结束时间差多少天
在Vue3中，使用dayjs库可以方便地计算两个日期时间之间的天数差。首先，通过npm install dayjs安装dayjs库。然后在Vue组件中，定义startTime和endTime两个响应式变量，分别表示开始时间和结束时间。通过calculateDiff函数，使用dayjs解析这两个时间，并计算它们之间的天数差。如果时间格式无效，会抛出错误并显示错误信息。最后，在模板中提供两个输入框用于设置时间，并通过按钮触发计算，结果显示相差的天数。
2025-05-12 11:10:37
202
原创 vue3使用＜el-date-picker分别设置开始时间和结束时间时，设置开始时间晚于当前时间，开始时间早于结束时间，结束时间晚于开始时间
vue3使用<el-date-picker分别设置开始时间和结束时间时，设置开始时间晚于当前时间，开始时间早于结束时间，结束时间晚于开始时间。为避免出现填写结束事件后再次修改开始时间，导致开始时间晚于结束时间，添加 @change=“handleChangeStartTime”
2025-04-29 17:46:09
962
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人