- 博客(466)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue3+js 下拉el-select样式修改
这段代码实现了一个自定义样式的下拉选择组件。通过popper-class="my-custom-dropdown"为下拉框添加自定义类名，然后使用CSS深度定制了下拉菜单的样式。主要样式包括：深蓝色背景(#07224c)、圆角边框、白色文字、悬停和选中状态的蓝色高亮效果(#236ace)，以及自定义的边框阴影效果。同时代码还处理了下拉箭头、选中项和多选标签的样式，确保整体风格统一。这种定制方式适用于需要与项目UI设计保持一致的场景，特别是深色主题的界面。
2026-05-25 13:22:25
12
原创 el-date-picker修改样式 vue3+js
这篇文章展示了一个自定义日期选择器组件的CSS样式代码。该样式将日期选择器设计为深蓝色主题（#07224c），带有浅蓝色边框（#236ace），所有文字显示为白色。主要样式包括：修改下拉面板背景色、调整边框样式、设置按钮和输入框的透明背景与边框效果、自定义日期表格的悬停和选中状态颜色（#1158bc85），以及时间选择面板的特殊样式处理。整体设计采用了半透明效果和发光边框，营造出科技感的UI界面。
2026-05-25 13:20:26
144
原创 某个系统程序运行中，点击菜单，请求https://www.xxx.xxx.cn/assets/js/inside_menu-PWLikSoI.js，十小时对该系统不操作，再次点击报错
前端SPA应用缓存失效问题解决方案 当Vue单页应用长时间闲置后出现"Failed to fetch dynamically imported module"错误时，通常是由于版本不匹配导致。该问题源于浏览器缓存的主程序代码与服务器更新后的菜单文件哈希值不一致。解决方案是在路由跳转时捕获ChunkLoadError错误，并自动刷新页面获取最新资源。对于Vite项目，还可以监听vite:preloadError事件实现自动刷新。这些方法能有效解决因版本更新导致的动态模块加载失败问题，提升用
2026-04-22 10:59:18
157
原创 vue3+ts实现组件拖拽功能，动态改变组件的宽度
本文解决了组件拖拽功能中鼠标样式异常导致宽度错误改变的问题。通过分析发现，浏览器默认的拖拽行为会干扰自定义拖拽逻辑。解决方案是在dragDown事件开始时调用event.preventDefault()，阻止浏览器默认行为（如文本选中和滚动）。代码实现了基于视口坐标的拖拽位置计算，包含边界检查、缩放比例处理等功能，并通过事件监听器实现平滑的拖拽效果和正确的鼠标抬起处理。该方案有效避免了拖拽过程中鼠标样式变化导致的意外行为，确保了组件宽度只在有效拖拽时改变。
2026-04-22 10:27:04
44
原创 Highcharts最左侧和最右侧的数据（柱状）显示不全
Highcharts柱状图最两侧数据显示不全的解决方案：设置minTickInterval后，图表会自动收紧边距导致两侧柱子被裁剪。可通过在xAxis配置中添加minPadding和maxPadding（推荐值0.05）来增加两侧空白区域，或使用startOnTick/endOnTick关闭边缘裁剪。关键代码示例展示了如何在datetime类型xAxis中应用这些参数，确保所有柱状数据完整显示。完整配置包含图表类型、标题、坐标轴和提示框等设置，适用于需要精确控制时间刻度间隔的场景。
2026-04-22 09:59:38
26
原创 Highcharts 使X轴时间格式为2025-01
摘要：本文介绍了如何在Highcharts中设置X轴仅显示年月格式（如2025-01）。关键实现包括：1）通过dateTimeLabelFormats强制所有时间单位（月/日/小时/分钟）都显示为年月格式；2）设置minTickInterval为30天的毫秒数，确保刻度间隔为整月。代码示例展示了完整的柱状图配置，包括时间轴格式化、提示框设置等，确保图表清晰展示年月维度的数据。
2026-04-22 09:56:08
135
原创 模板里 item.xxx 报错 ，报 item的类型为未知
Vue3+TS环境下出现item类型未知(unknown)报错，原因是未定义item类型。解决方法：1)定义TableItem接口，允许任意属性；2)为数组声明类型，可通过ref<TableItem[]>或defineProps指定类型为TableItem[]。这样TS就能正确推断item类型，解决相关报错问题。
2026-03-30 15:23:08
49
原创 vue3 通过图片链接获取图片的长与宽
摘要：这段代码展示了在Vue3中通过图片链接获取图片尺寸的方法。通过创建Image对象，在onload回调中获取图片的naturalWidth和naturalHeight属性来得到原始尺寸。代码包含内存释放优化(可选)和注释掉的错误处理部分。注意src设置应放在最后以确保正确加载。
2026-03-13 13:46:44
34
原创 vue3分别使用＜el-date-picker进行时间范围筛选时，设置开始时间与结束时间最大可选时间范围是24小时，不在该范围内的时间禁止选择，且时间格式为年月日时分秒，
摘要：本文展示了使用Element UI的el-date-picker组件实现时间范围筛选功能，限制开始时间与结束时间间隔不超过24小时。通过计算属性pickerStartOptions和pickerEndOptions分别控制开始时间和结束时间的可选范围，包括日期、小时、分钟和秒的选择限制。代码使用day.js处理日期计算，确保时间格式为"YYYY-MM-DD HH:mm:ss"，并针对同一天/不同天的情况进行精细化控制，防止选择超出24小时范围的时间段。
2026-03-12 17:55:42
170
原创 vue3 ＜el-table-column中的show-overflow-tooltip设置展示的最大宽度
摘要：本文介绍了如何在Element UI的el-table-column中通过show-overflow-tooltip属性设置提示框的最大宽度。使用scoped样式和:deep选择器，可以修改.el-popper类的max-width属性（如设置为30%）来限制提示框宽度。注释部分展示了如何修改暗黑模式下的背景色（示例中被注释）。这种方法有效解决了表格内容过长时提示框过宽的问题。
2026-03-12 17:02:18
89
原创 maptalks设置禁用地图滚轮缩放
摘要：本文介绍如何在maptalks中禁用地图滚轮缩放功能。可通过两种方式实现：1) 初始化地图时在options中设置scrollWheelZoom: false；2) 对已创建的地图使用map.config('scrollWheelZoom', false)来更新配置。两种方法都能有效禁止用户通过鼠标滚轮缩放地图。
2026-02-28 15:13:42
55
原创 动态类名在 ＜swiper-slide 的复制项中没有起作用的解决方法
摘要：Swiper循环模式下复制slide时，Vue的响应式指令(:class)会失效。解决方案是通过监听Swiper切换事件和Vue数据变化，手动同步真实slide和复制slide的active类名。具体实现：1) 给slide添加data-group-name标记；2) 使用watch监听activeGroup变化；3) 通过DOM操作统一更新所有slide的active类。该方法绕过了Vue响应式限制，确保循环模式下选中样式正常显示。
2026-01-23 13:52:46
241
原创 :src=“`/src/assets/imgs/home/${item.img}.png`“在配置 { find: /\@\//, replacement: `${pathResolve(‘src‘)
静态资源路径打包问题解析 当使用动态绑定图片路径（如:src="/src/assets/imgs/home/${item.img}.png"）时，构建工具不会自动处理路径别名和资源编译。这是因为： 路径别名配置仅作用于模块导入语句 动态字符串模板被视为普通字符串 构建工具只处理明确导入或静态路径的资源 解决方案： Vite专属方案：使用new URL动态导入，确保资源被正确处理 静态导入方案：预导入已知图片，适用于固定图片名称场景 推荐使用Vite的new URL方案，既能支持动态变量又
2026-01-15 15:56:02
389
原创 swiper-slide 设置禁止拖拽滑动
摘要：通过设置Swiper的allowTouchMove: false参数可以禁止用户通过拖拽滑动轮播图。示例代码展示了一个Swiper配置对象，其中还包含其他常用参数如slidesPerView设置每行显示数量、spaceBetween设置间距、speed控制切换速度等。同时启用了observer参数来动态监测DOM变化。这种配置适用于需要固定显示而不允许用户手动滑动的轮播场景。
2026-01-15 15:49:06
148
原创 img 与外层div底部有缝隙
解决图片底部间隙问题，通常是因为img作为内联元素默认基线对齐（baseline）所致。主要解决方法：1）设置vertical-align为middle/bottom/top；2）将img改为块级元素（display:block）。引用[3]建议配合父元素line-height使用vertical-align:middle实现垂直居中。这些方法能有效消除因基线对齐产生的底部间隙。
2026-01-08 09:04:21
185
原创 类型“{ center: number[]； zoom: number； }”的参数不能赋给类型“ResetViewOption”的参数。 属性“center”的类型不兼容。 不能将类型“
摘要：TypeScript报错显示number[]类型无法赋值给[number, number]元组类型。解决方法是在定义中心坐标时，使用类型断言as [number, number]明确指定为包含两个数字的元组类型。这解决了目标类型要求严格两个元素而源类型可能不足的问题。修改后的代码能正确传递给resetView方法。
2025-12-29 14:13:00
94
原创 vue3 ts不能将类型“Timeout”分配给类型“null”。
摘要：在Vue3 TypeScript项目中，将Timeout类型赋给null会报类型错误。解决方法是将变量声明为联合类型null | NodeJS.Timeout，如示例代码所示。这解决了类型不匹配问题，同时保留了变量可赋值为null的灵活性。
2025-12-26 14:26:24
116
原创 vue2项目部署后element图标失效
摘要：本文介绍了解决Vue项目打包路径问题的两种方法。一是在build/utils.js中修改ExtractTextPlugin配置，添加publicPath: '../../'；二是在vue.config.js中配置url-loader的publicPath参数。同时提供了完整的vue.config.js配置示例，包含字体文件处理、开发服务器设置等常用配置项。这些修改可解决静态资源路径错误问题，适用于需要自定义打包路径的Vue项目。
2025-12-08 18:12:33
259
原创 路由视图刷新（无白屏）
在Vue项目中实现无白屏路由刷新，可以通过动态修改router-view的key来触发组件重新渲染。在App.vue中，将router-view的key绑定到$route.fullPath和一个自定义的reloadKey变量，通过provide/inject机制向子组件提供reload方法。当调用reload()时，递增reloadKey值，强制Vue重新创建组件实例，实现无缝刷新。这种方法避免了传统页面刷新的白屏现象，提升了用户体验。
2025-11-19 11:00:41
124
原创 ElMessageBox设置里面的确认、取消按钮样式大小为default
本文介绍了如何设置ElMessageBox弹窗中确认和取消按钮的默认样式大小。通过添加buttonSize:'default'配置项，可以保持按钮的标准尺寸。示例代码展示了一个删除确认弹窗的实现，包含确认删除和取消操作的回调处理，以及删除成功后的提示信息显示。该设置适用于需要保持UI组件样式一致性的场景。
2025-10-20 13:38:53
346
原创 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
206
原创 vue3+vite创建的项目，运行后没有 Network地址
本文介绍了如何修改 Vite 配置文件以启用网络访问功能。主要内容包括：在项目根目录找到 vite.config.js/ts 文件，通过添加 server.host: '0.0.0.0' 配置来开放网络访问，同时可指定端口号。修改后开发服务器将允许同一局域网内的设备访问。
2025-10-18 14:45:29
486
原创 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
822
原创 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
297
原创 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
548
原创 ＜input hidden id=“file-template“ type=“file“＞点击一次上传文件后，再次点击，@change不生效，现在想，再次点击上传文件后替换当前文件
摘要 解决文件上传input重复点击无效问题：通过重置input的value属性实现重复上传。在@change事件处理函数中，获取文件后执行event.target.value = ''清空已选文件，确保下次点击能触发change事件。示例代码展示了在Vue组件中实现该功能的方法。
2025-09-12 10:42:57
225
原创 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
267
原创 vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
Vue3+TS中数组类型"never"问题的解决方案 当在Vue3中使用TypeScript声明响应式数组时，如果未明确定义类型，空数组会被默认推断为never[]类型，导致后续无法添加boolean等具体类型值。 解决方法： 使用reactive时明确指定数组类型： const arr = reactive([]); 确保数组初始化时包含类型信息 这能避免类型推断错误，使数组能正确接收boolean等指定类型的元素。
2025-09-04 11:21:19
327
原创 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
397
原创 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
315
原创 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
652
原创 ＜el-table设置每一行的鼠标样式为小手
摘要：通过el-table的cell-style属性，可以自定义表格单元格样式。示例中使用rowStyle方法返回{cursor:'pointer'}，将表格每行的鼠标指针设为小手形状，表示该行可点击。这种设置方式简单高效，适用于Vue+Element UI项目，提升用户交互体验。
2025-08-19 16:13:23
198
原创 vue 循环遍历数组 每隔五个终止一段时间后再次开始遍历
文章摘要： 在Vue中实现数组分批处理（每5个元素暂停100毫秒），可通过异步循环配合Promise定时器实现。示例代码展示了一个文件上传方法，在遍历文件数组时，每处理完5个文件就通过setTimeout暂停100毫秒（使用await new Promise）。关键点在于利用取模运算total % 5判断批次，并通过异步等待控制流程节奏。这种技术适用于需要控制请求频率或分批处理大量数据的场景。
2025-08-19 15:47:21
167
原创 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
595
原创 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
3564
原创 vue2 生成n个随机颜色且不生成指定颜色
本文介绍了一个Vue2方法，用于生成n个不包含指定颜色的随机十六进制颜色。核心方法generateRandomColor()通过循环生成随机颜色（格式#RRGGBB），直到颜色不等于#00bbff（忽略大小写）。generateColors(n)方法则调用前者生成指定数量的随机颜色数组，并包含输入验证。该方法简单实用，适用于需要排除特定颜色的随机颜色生成场景。
2025-08-07 17:00:08
493
原创 vue2 ＜el-select修改下拉宽度，超出部分在鼠标悬浮的时候显示完整
摘要 在Vue2的Element UI中，通过设置:popper-append-to-body="false"可控制下拉框不追加到body。为优化长文本显示，使用<el-tooltip>实现悬浮提示功能：通过checkOverflow方法检测文本是否溢出（比较scrollWidth和clientWidth），若溢出则在鼠标悬浮时显示完整内容。这种方案有效解决了下拉选项宽度限制下的内容展示问题。
2025-08-04 09:51:56
368
原创 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
306
原创 vue面试题
本文摘要介绍了前端开发中三个常见技术要点：1) Echarts常用组件包括标题、工具栏、提示框等可视化元素；2) Uni-APP的分包机制优化小程序性能，实现按需加载；3) Webpack打包原理及优势，包括模块化处理、依赖分析、代码拆分等，以及Babel在转译中的作用。内容涵盖数据可视化、小程序开发和前端工程化三个技术方向的核心概念。
2025-07-31 10:21:20
174
原创 el-table获取当前勾选的数据信息，判断是勾选还是取消勾选
本文介绍了Element UI表格组件中多选功能的实现方法。通过@selection-change事件获取当前选中数据，记录选中总数；利用@select事件处理单选操作，通过判断当前行是否在选中数组中区分勾选/取消勾选。代码展示了如何获取操作行数据并打印日志，注释部分还提供了往自定义数组添加/移除选中项的实现思路（需自行取消注释使用）。
2025-07-30 17:52:23
482
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人