- 博客(34)
- 收藏
- 关注
RSS订阅原创 使用css 给div添加四角线框
本文展示了如何用CSS创建带渐变边框的div容器效果。通过linear-gradient实现四角斜线边框，代码中使用多组渐变色模拟边框效果，并通过background-position控制显示位置。可通过调整left/top参数改变边框间距，支持自定义标题图标和数据截止时间显示。文章提供完整HTML结构和CSS样式代码，适合需要特殊边框效果的UI实现。
2025-11-05 15:30:30
235
原创 关于JavaScript中的Object.values()默认排序问题总结
文章摘要：在处理Echarts数据渲染时，直接使用for...in遍历对象会导致月份顺序错乱。作者提供了两种解决方案：1)预先定义月份键顺序进行遍历；2)通过Object.keys()排序后取值。通过MDN文档确认，Object.values()的返回顺序与for...in循环一致，建议使用预定义排序或map方法确保数据顺序正确。文章最后提醒关注持续学习更新。（149字）
2025-09-29 15:10:33
486
原创 js 寻找Object里嵌套对象的最长一项
本文介绍了在使用ECharts绘制柱状图时，当X轴年份不固定时的数据处理方法。通过JavaScript的reduce方法，比较接口返回数据中各年份数组的长度，筛选出年份跨度最长的一项作为X轴基准。具体实现是使用Object.keys()获取数据键名，通过reduce遍历比较，最终输出标准年份数组。该方法有效解决了动态X轴的设定问题，为数据可视化提供了灵活解决方案。
2025-09-29 09:32:46
222
原创 一行代码实现深拷贝？别再用 JSON.stringify 了！
JSON.stringify()实现的深拷贝存在严重缺陷：无法处理循环引用会报错；丢失函数、Symbol等特殊类型；Date转为字符串，RegExp变空对象；破坏原型链；无法处理Map/Set等集合类型。现代方案推荐使用结构化克隆API structuredClone()，支持循环引用和多数内置类型，但仍有不支持函数等局限。JSON序列化方式的深拷贝在实际项目中容易引发bug，应避免使用。
2025-09-18 11:21:38
190
原创 【Vue】fullcalendar - next ,prev切换回调处理
摘要：本文介绍了如何在FullCalendar中自定义上下月按钮的回调函数。通过在calendarOptions的customButtons中定义next和prev按钮，并绑定对应的click方法。在methods中实现prevMonthCustomClick和nextMonthCustomClick方法，使用getApi().prev()和getApi().next()来实现月份切换功能，同时可通过view.currentStart获取当前年份和月份信息。（94字）
2025-09-17 14:05:05
272
原创 vue2使用若依框架动态新增tab页并存储之前的tab页的操作
本文介绍了在若依框架中实现动态Tab页对比功能的开发方案。针对历史记录对比场景，通过动态路由技术实现在不同Tab页间切换查看数据。核心技术点包括：1）利用addDynamicRoute方法动态添加路由；2）通过generateRouteName生成唯一路由标识；3）在tab.js中扩展openPage方法创建新页签；4）结合路由守卫和watch监听实现参数传递与数据缓存。该方案解决了框架默认静态路由配置的限制，实现了灵活的页面复用和参数传递，适用于需要多页面对比的业务场景。文中详细展示了核心代码实现和效果验
2025-09-10 14:34:59
421
原创 Element-ui icon鼠标移入显示提示（已解决）
为图标添加title属性可提升用户体验，鼠标悬停时显示提示文字（如"保存为图片"）。方法简单：在i标签内加入title="提示文本"即可。示例：<i class="icon" title="保存为图片"></i>。这种无障碍设计能明确功能说明，适合各种UI图标场景。（49字）
2025-08-25 11:07:45
163
原创 vue 使用html2canvas将echarts图标保存为图片（亲测好用）
本文介绍了如何使用html2canvas库实现网页图表下载功能。首先通过npm或yarn安装html2canvas，然后在代码中导入该库。核心代码示例展示了如何通过html2canvas将ECharts图表转换为canvas，再生成PNG图片并触发浏览器下载。该方法支持通过ref或id获取DOM元素，简单易用。作者亲测有效，欢迎读者评论交流。
2025-08-25 10:31:56
392
原创 前端更改浏览器默认滚动条样式
这段CSS代码用于自定义滚动条样式，主要包含三个功能：1) 设置容器为弹性布局(flex:1)并允许内容溢出滚动(overflow:auto)；2) 使用伪元素::-webkit-scrollbar定义滚动条宽度为2px，背景色为#fefefe；3) 通过::-webkit-scrollbar-thumb设置滚动条滑块圆角(10px)和颜色(#DDDDDD)。这种写法适用于需要美化WebKit内核浏览器(如Chrome)滚动条的场景，代码简洁高效。
2025-08-15 13:56:57
151
原创 Element-ui el-cascader 联级回显
本文介绍了使用Vue2+Element UI实现el-cascader组件的动态加载和回显功能。通过配置lazy和lazyLoadNode属性实现级联数据的异步加载，利用leaf参数控制节点层级。重点讲解了数据回显的实现方法：先加载第一级数据，再根据选中值动态构建完整的级联结构，通过Promise确保数据加载完成后再显示。文章还提供了完整的代码示例，包括动态加载子节点、处理回显数据等关键步骤的实现细节。
2025-08-14 10:51:13
423
原创 el-table 横向单元格
本文介绍了如何为表格添加合计行并实现偏差计算功能。通过配置show-summary、summary-method等属性，在表格底部显示合计行。核心方法getSummaries()实现了预算值与实际值的偏差计算，包括第三方采购、人工时、差旅费等项目的预算与实际值对比，并计算总偏差。当偏差为负值时，通过applyNegativeStyles()方法自动将数值标红显示。文章提供了完整的代码实现思路，从占位格设置、数据改造到样式应用，帮助开发者快速实现表格数据的统计分析功能。
2025-07-30 13:27:21
270
原创 vue2 使用fullcalendar来记录日程添加节假日补班
本文介绍了使用FullCalendar库实现工作日志管理的方法。通过安装相应插件（Vue2/Vue3版本不同），配置中文显示、周起始日等参数，并自定义日期单元格样式，可构建可视化日程表。文章详细说明了如何集成节假日数据（可本地存储或调用API），并提供了样式优化方案（如hover效果、单元格高度固定）。最终实现了一个支持月/周/日视图切换、节日标注的交互式日历组件，适用于个人行程管理需求。文中包含完整代码示例和配置说明，为开发者快速实现类似功能提供了参考。
2025-07-22 13:17:21
855
原创 用css画斜边有弧度得三角
这是一段可直接复用的HTML/CSS代码，创建了一个具有特殊圆角效果的按钮。按钮宽180px、高80px，采用蓝色背景(#409eff)和白色文字。通过::before和::after伪元素实现了两侧的半圆缺口效果，使用径向渐变(radial-gradient)完美衔接按钮主体。代码包含完整的HTML结构，从DOCTYPE声明到body内容，只需复制粘贴即可使用。作者鼓励用户点赞收藏加关注。
2025-07-02 09:26:57
205
原创 (已解决)js禁止用户手动操作页面缩放
本文提供了一个禁止网页缩放的前端代码解决方案，适用于HTML和Vue项目。代码通过监听键盘和鼠标事件，阻止用户使用Ctrl键和鼠标滚轮进行页面缩放。具体实现包括覆盖document.onkeydown事件和body的wheel事件，确保用户无法通过快捷键或滚轮缩放页面。对于Vue项目，只需将代码粘贴到根目录的index.html文件中即可生效。文章最后提醒读者关注作者，以获取更多实用内容。
2025-05-22 09:16:29
288
2
原创 tinymce富文本工具栏
再使用tinymce富文本编辑器的时候点击工具栏上面的三个点然后在不主动关闭的情况下关闭这个页面----这里我要说一下(我这里是一个。查阅了文档之后可以再beforeUnmount生命周期销毁这个富文本的实例。) 当为true的时候这个组件消失，但再没。关闭工具栏的时候会发现工具栏出现在其他页面。布尔值控制这个页面的显示与隐藏。
2025-05-16 09:36:15
288
原创 一文解决Element-plus 关闭弹窗再打开报错问题
今日再解决bug的同时，页面有三个按钮弹窗事件，来回点击切换后，突然就报错，点了没反应，一打开控制台报错了。 大家请看搜了很多资料原来是因为关闭弹窗后其中的子元素没有被完全销毁掉！！最后查阅了官方文档发现有个方法是专门再弹窗关闭时来销毁其中的元素在头部加上去就好了，完美解决制作不易，点个赞再走吧
2025-05-10 18:03:18
287
转载 vue3取消跟踪auto-imports.d.ts，components.d.ts这两个文件的变化
文章转自:原文链接：https://blog.youkuaiyun.com/2302_77290281/article/details/143301461。我们每次提交git的时候，auto-imports.d.ts。这样我们的git就不会再追踪这两个文件的变化。在项目.gitignore文件内添加。
2025-04-23 14:53:01
587
原创 解决vue 启动问题set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve
今天在启动项目时偶然发现一个问题，解决之后也给大家避个雷。文件里 做以下操作即可，方便快捷，直击痛点。
2025-04-21 14:55:45
2058
原创 ElementPlus upload on-progress踩坑记录
钩子函数,但使用了会发现on-progress 有时不触发. 上网百度了一大堆,概而论之大概意思就是由于 项目中引入了mock 数据覆盖了原有的xhr请求,但是。项目里一搜一大堆mock,还要保证后端接口数据调取成功，这。思路来自于：https://www.cnblogs.com/best-fyx/p/11363506.html，on-progress用不了，用on-change代替（上传过程中都会调用这个方法，file.上传大文件的时候要显示上传的进度条,需要用到upload on-progress。
2024-08-13 10:10:06
1334
1
原创 Vue2+ElementUI from表单校验上传图片
我们知道from 表单的校验需要rules里面对象的字段和prop对应的字段保持一致才可以触发校验，所以可以先在rules里定义上传图片的字段跟prop保持一致使它触发校验，接着在上传的时候可以自己定义remove事件，把图片url清空，之后再把它原来的规则添加进去就完成了！！！
2024-05-23 13:53:04
707
1
原创 改造 console.log！！!让打印一目了然
这样能通过文件路径看到具体是哪一个文件输出的信息，并且都能看到每一个输出值所对应的变量名。就会发现出现很多打印，因为项目中很多个文件都是这么打印的。来定位问题的 然后通过打印的东西，去看是否达到预期的结果：比如这段打印。其实我们可以使用个插件，很明确的看出来我们在那个文件写的打印。这时候怎么高效的解决呢？难道一个一个的点进源码里看吗？近期在开发项目中遇到了一个问题，前端定位问题是通过。添加完之后我们重新运行然后再控制台看出来。适用于 webpack 项目。适用于 vite 项目。
2024-04-13 15:50:55
283
1
原创 超火前端Radash库，声称要代替Loadsh！！！
随着JavaScript引入了可选链和空值合并操作符，Lodash库中的许多函数显得不那么必要了。同样，随着 JavaScript 和 TypeScript 的最新进展，传统的函数如 .get、.map 和 _.size 等已经变得不那么必需了。更重要的是，就性能而言，像可选链这类语言特性的效率远超过了 Lodash 的 _.get 函数，其速度几乎是后者的两倍。最近 Radash 这个库火的一塌糊涂，这是一个类似于 Lodash 的前端工具库，短短时间内在 github 上就拥有 3.4k star。
2024-04-11 15:45:39
1442
1
原创 javaScript 为什么[]==![] 返回为true
（严格相等运算符）来避免这种隐式类型转换，因为它不会进行类型转换，只会在两边的值和类型都完全相同时返回。可能看起来有些令人困惑，但这实际上是由于JavaScript的类型转换和相等性比较规则导致的。这种行为是JavaScript中“弱类型”或“动态类型”系统的一个例子，也是为什么有时推荐使用。，因为数组和布尔值在严格比较下永远不会相等。[] 返回为true。在JavaScript中，所以我们就知道了为什么。
2024-04-10 17:40:02
320
1
原创 Vue3 插槽
默认插槽名为default，可以省略default直接写v-slot。缩写为#时不能不写参数，写成#default（这点所有指令都一样，v-bind、v-on）只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法。3.作用域插槽：官方叫他 作用域插槽。多个插槽混用时，v-slot不能省略default。父组件 father.vue。父组件 father.vue。父组件 father.vue。子组件 child.vue。父组件 father.vue。
2024-03-11 10:40:40
468
原创 ES9方法 for await of
但是上面代码也是有缺点的，如果有几十个，那不是得写几十个await，有没有一种方法可以通过循环来输出呢？上述代码中，我们使用for await of 方法对arr进行遍历。制作不易，点个关注再走吧!第一时间我们肯定想到的是。文章出自原创作者 “
2024-03-04 11:59:14
524
原创 Vue2 如何使用i18n（看完必会）
以上就是关于vue2如何使用i18n的介绍与步骤 简单的一些整理 哪里有不对的 或者有写错的 就在下面留言 我们共同进步 ~~~~2.随后我们在我们的入口文件main.js里。这里我选择的是8.2.1版本。执行命令就不会报错了。@9.1.9 ** 这段意思是 版本不匹配。所以我们需要给vue-i18n 降级。中英切换、两种或者多种语言切换时。我们在需要切换语言的文字中。
2024-03-02 14:13:33
8257
9
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人