- 博客(429)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 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
94
原创 vue面试题
本文摘要介绍了前端开发中三个常见技术要点：1) Echarts常用组件包括标题、工具栏、提示框等可视化元素；2) Uni-APP的分包机制优化小程序性能，实现按需加载；3) Webpack打包原理及优势，包括模块化处理、依赖分析、代码拆分等，以及Babel在转译中的作用。内容涵盖数据可视化、小程序开发和前端工程化三个技术方向的核心概念。
2025-07-31 10:21:20
83
原创 el-table获取当前勾选的数据信息，判断是勾选还是取消勾选
本文介绍了Element UI表格组件中多选功能的实现方法。通过@selection-change事件获取当前选中数据，记录选中总数；利用@select事件处理单选操作，通过判断当前行是否在选中数组中区分勾选/取消勾选。代码展示了如何获取操作行数据并打印日志，注释部分还提供了往自定义数组添加/移除选中项的实现思路（需自行取消注释使用）。
2025-07-30 17:52:23
74
原创 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
791
原创 根据地图平移，改变地图弹窗位置，调整锚点显示问题，解决地图层级改变产生偏移量问题
本文提出了一种地图弹窗位置自动优化方案，通过监听地图移动事件实时调整弹窗显示位置。核心方法包括：1) 计算弹窗8个可能锚点的位置；2) 评估每个锚点的可视区域溢出量；3) 优先选择上下方向的锚点；4) 根据最佳锚点动态调整偏移配置。技术实现上采用容器边界检测、安全边距设置和坐标转换，确保弹窗始终保持在可视范围内。该方案通过事件总线通知组件更新，有效解决了地图平移时的弹窗定位问题，具有定位精准、响应及时的特点。关键代码展示了从事件监听到位置计算、锚点选择及最终定位的完整流程。
2025-07-29 17:12:29
187
原创 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
313
原创 不能将类型“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
267
原创 maptalks限制地图拖动范围
maptalks可以通过设置maxExtent参数限制地图的拖动范围。示例代码中，将maxExtent设置为[0, -90, 360, 90]，定义了地图可拖动区域的边界坐标（最小经度0，最小纬度-90，最大经度360，最大纬度90）。这样地图将无法被拖出设定的经纬度范围，同时配合minZoom:3设置了最小缩放级别。该方法适用于需要控制地图显示区域的场景，如全球地图或特定区域地图的展示。
2025-06-18 17:59:00
145
原创 vue3 根据当前屏幕宽度整体缩放界面
摘要：Vue3实现根据屏幕宽度整体缩放界面并保持高度自适应的方案。通过监听窗口resize事件，计算当前宽度与设计稿基准宽度(1920px)的比例作为缩放系数。使用transform:scale实现整体缩放，transformOrigin设置为左上角定位。高度通过窗口实际高度除以缩放系数动态计算，实现高度自适应。组件挂载时初始化并添加resize监听，卸载前移除事件监听。这种方法适用于大屏在不同分辨率下的适配需求。
2025-06-18 11:27:12
478
原创 根据地图平移，改变地图弹窗位置，调整锚点显示问题
文章摘要： 本文介绍了一种地图弹窗位置自动调整的方法。通过监听地图移动事件，在每次移动结束后调用adjustPopupAnchor函数重新计算弹窗位置。该方法考虑了弹窗大小、容器边界和安全边距，自动选择最佳锚点位置（包括8种可能方向），计算每个锚点的溢出量，优先选择上下方向的锚点。最后应用新的偏移配置更新弹窗位置，并通过事件总线通知其他组件。该方案有效解决了地图平移时弹窗显示位置不当的问题，确保弹窗始终保持在可视区域内。
2025-06-17 17:12:20
237
原创 将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
170
原创 Monaco Editor实现ctrl+v粘贴时进行代码格式化
摘要：通过Monaco Editor的addAction方法实现Ctrl+V粘贴时自动格式化代码。代码示例展示了如何添加自定义快捷键操作，在粘贴内容后延迟100毫秒触发文档格式化。该方法先执行系统默认粘贴操作，再调用格式化功能，为代码编辑提供了便捷的格式处理。实现原理是利用setTimeout延迟执行格式化命令，确保粘贴内容完整后再进行格式化处理。
2025-06-10 13:32:30
233
原创 Monaco Editor实现ctrl+s保存后进行代码格式化
摘要：通过Monaco Editor的addAction方法实现Ctrl+S快捷键保存时自动格式化代码。代码示例展示了如何创建一个格式化并保存的动作，其中使用keybindings设置快捷键组合(CTRL+S)，在run方法中调用editor.trigger触发格式化操作。该方法可替代默认保存行为，在保存前先执行代码格式化，但示例中保存函数(saveContent)被注释，需要开发者自行实现实际保存逻辑。
2025-06-10 13:30:50
113
原创 monaco-editor添加 MATLAB 语言支持
摘要：本文展示了如何在 Monaco 编辑器中对 MATLAB 语言进行语法配置，包括注册语言、设置注释规则、括号匹配和缩进规则，并实现基础语法高亮。配置内容包括：使用 % 和 %{%} 作为单行和多行注释标记，定义 MATLAB 关键字（如 if/for/function 等）和缩进规则（根据控制结构自动调整），以及基本的数字和标识符识别。该配置为 MATLAB 代码提供了基本的编辑器支持功能。
2025-06-09 17:19:34
207
原创 TypeError: editor.addEditorAction is not a function
文章摘要：Monaco Editor新版已弃用旧API addEditorAction()，改用addAction()。为解决项目中新旧API冲突问题，提供替代方案示例。新方法通过addAction()注册编辑器动作，包含ID、标签、快捷键绑定及运行逻辑（如格式化文档）。代码片段展示了如何将Ctrl+S快捷键绑定到格式化保存操作，同时注释了潜在的保存功能调用。该方案解决了API兼容性问题，同时保持了原有功能。
2025-06-09 16:58:49
129
原创 CSS3前端入门（第三天）2D转换 transform
摘要：CSS3的transform属性可实现元素的2D变换效果，主要包括位移(translate)、旋转(rotate)和缩放(scale)。其中，translate移动元素位置，参数可用百分比（相对于元素自身尺寸）；rotate使元素在平面内旋转，角度单位为deg。通过transform可实现精准定位，如元素垂直水平居中（结合定位和translate(-50%,-50%)）。这些变换效果不改变文档流位置，是CSS3最具突破性的特性之一。
2025-05-30 14:50:55
285
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
224
原创 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
136
原创 vue3请求设置responseType: ‘blob‘,导致失败后获取不到返回信息
摘要 在Vue3中设置responseType: 'blob'请求时，失败响应无法直接获取错误信息。通过FileReader可解析错误响应：首先检查响应类型，若为JSON则使用FileReader读取Blob数据并解析JSON内容；成功响应则处理文件下载。该方法有效解决了blob响应无法直接获取错误信息的问题，同时保持正常文件下载功能。<｜end▁of▁sentence｜>
2025-05-21 17:26:18
326
原创 vue3年月日时分秒格式的时间，获取开始时间和结束时间差多少天
在Vue3中，使用dayjs库可以方便地计算两个日期时间之间的天数差。首先，通过npm install dayjs安装dayjs库。然后在Vue组件中，定义startTime和endTime两个响应式变量，分别表示开始时间和结束时间。通过calculateDiff函数，使用dayjs解析这两个时间，并计算它们之间的天数差。如果时间格式无效，会抛出错误并显示错误信息。最后，在模板中提供两个输入框用于设置时间，并通过按钮触发计算，结果显示相差的天数。
2025-05-12 11:10:37
142
原创 vue3使用＜el-date-picker分别设置开始时间和结束时间时，设置开始时间晚于当前时间，开始时间早于结束时间，结束时间晚于开始时间
vue3使用<el-date-picker分别设置开始时间和结束时间时，设置开始时间晚于当前时间，开始时间早于结束时间，结束时间晚于开始时间。为避免出现填写结束事件后再次修改开始时间，导致开始时间晚于结束时间，添加 @change=“handleChangeStartTime”
2025-04-29 17:46:09
801
原创 el-date-picker 设置开始时间晚于当前时间（包含时分秒的处理）
el-date-picker 设置开始时间早于当前时间（包含时分秒的处理）
2025-04-29 17:39:01
263
原创 Package subpath ‘./2020/RequireObjectCoercible‘ is not defined by “exports“ in E:\project
解决方案：检查node版本，可能是node版本导致。
2025-04-22 17:04:47
286
原创 index.esm.js:23 Uncaught (in promise) Error: Cannot resolve a Slate range from DOM range:
在编辑器中添加v-if，使页面加载后添加编辑器。使用wangEditor时报错。
2025-04-21 15:21:29
386
原创 vue3 el-slider 的tooltip修改方块样式
min.value是slider范围的最小值max.value是slider的最大值，这里替换为你的范围即可自定义Tooltip组件<template></div></div>// 点击后显示，一秒后关闭显示${const percent =((value . value - min . value) /(max . value - min . value)) * 100 // 点击后显示，一秒后关闭显示 setTimeout(() => {return {
2025-04-18 10:55:52
415
原创 maptalks地图快照，将当前地图范围截图并下载
save’: true, 保存并下载，没有这一行代码的话，data 为base64的图片。maptalks地图快照，将当前地图范围截图并下载。
2025-04-17 18:01:01
162
原创 vue3 element-plus中的国际化在onMounted中的写法
重点 const { t, locale } = useI18n() 引入t。vue3 element-plus中的国际化在onMounted中的写法。
2025-04-17 16:32:46
243
原创 maptalks获取图层中所有几何体，并获取 Circle 类型的最小范围
maptalks获取图层中所有几何体，并获取 Circle 类型的最小范围。
2025-04-17 16:00:04
108
原创 maptalks矩形绘制结束后，获取最大经度最大纬度，最小经度最小纬度，从左上角开始依次获取并展示坐标
maptalks矩形绘制结束后，获取最大经度最大纬度，最小经度最小纬度，从左上角开始依次获取并展示坐标。
2025-04-17 15:45:25
408
原创 vue将“00:00:09“的时间转换为秒，将时分秒hh:mm:ss的格式转换为秒，
vue将"00:00:09"的时间转换为秒，将时分秒hh:mm:ss的格式转换为秒，计算总秒数：hours3600 + minutes60 + seconds。检查数组长度是否为3（HH:MM:SS），否则抛出错误。将时间字符串按冒号分割成数组。将各部分转换为整数。
2025-04-17 11:09:43
273
原创 vue使用video标签 直接定位到某个时间
涉及到设置video元素的currentTime属性，通过this.$refs.video.currentTime = n来实现的。vue使用video标签 直接定位到某个时间。
2025-04-17 11:01:02
385
原创 vue面试题
都可以控制元素的显示和隐藏1.V-show时控制元素的display值来让元素显示和隐藏：v-if显示隐藏时把DoM元素整个添加和删除2.V-if有一个局部编译/卸载的过程，切换这个过程中会适当的销毁和重建内部的事件监听和子组件；V-show只是简单的CSs切换3.v-if才是真正的条件渲染；V-show从false变成true的时候不会触发组件的声明周期，v-if会触发声明周期4.V-if的切换效率比较低V-show的效率比较高。
2025-04-07 18:03:54
1064
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人