- 博客(57)
- 收藏
- 关注
RSS订阅原创 Electron桌面应用实战：Element UI 导航栏橙色轮廓之谜与Bootstrap样式冲突解决方案
在 Electron 应用开发中，使用 Element UI 构建导航栏时遇到焦点样式异常。深入排查发现，Element UI 在处理组件焦点状态时引用了 Bootstrap 的样式规则，导致出现未预期的橙色轮廓。本文详细解析问题根源，并提出包括重写样式、禁用相关样式片段、深度定制 Element UI 组件及隔离样式作用域在内的解决方案，为开发者解决类似问题提供实战参考。
2024-01-29 21:50:33
1287
原创 【ECharts 实战】5分钟学会：巧设Legend与Tooltip，提升数据可视化体验
在使用 ECharts 进行复杂的数据可视化过程中，定制图表元素以适应具体业务场景和用户需求至关重要。本文将通过一个直观的实例，带领我们在短短5分钟内掌握如何利用 ECharts 对图例（Legend）与提示框（Tooltip）中的系列名称进行个性化重命名，从而显著提升图表的可读性和满足用户的个性化需求。
2024-01-29 11:43:31
852
原创 VSCode快捷键大全：提升编程效率的利器
本文将为您详细介绍Visual Studio Code（VSCode）中常用的快捷键，这些快捷键可以帮助您快速地导航、编辑和调试代码，提高编程效率。通过掌握这些快捷键，您将能够更轻松地应对各种编程任务，提升工作效率。
2023-12-24 16:16:22
1321
原创 Vue开发实践：解决Chrome浏览器禁止通过代码关闭窗口的问题
Chrome 浏览器中使用 window.close() 来关闭当前窗口，但是实际运行中没有关闭窗口，打开控制栏发现警告 " 只能关闭由代码打开的窗口 "：这是由于 Chrome 浏览器的安全限制，window.close() 只能关闭通过 window.open() 方法或脚本创建的窗口。本文将讲述如何跳过Chrome安全策略，实现关闭窗口功能。
2023-12-22 17:33:01
1607
1
原创 Element UI导航菜单之秘：无痕迹浏览与历史记录栈的管理
在使用 Element UI 的 el-menu 导航栏菜单时，发现history栈（历史记录栈）会不断缓存之前的记录，而在某些场景下我们可能不希望history栈（历史记录栈）中有之前的记录，即实现无痕迹流量模式。
2023-12-22 16:47:41
1332
原创 VSCode调试Vue项目
代码在某个平台运行时，会将运行时的状态通过某种方式暴露出来。这些状态信息可以通过某种方式传递给开发工具，以便进行UI的展示和交互。这样的交互可以辅助开发者排查问题、梳理流程，并更好地了解代码的运行状态。这就是我们通常所说的调试。在过去，我们常常需要在浏览器中进行调试，但这种方式往往显得繁琐，尤其是在只有一个屏幕的情况下，我们很难同时查看代码和调试信息。然而，VSCode 拥有内置的 Debug 功能，使得调试变得更加便捷。
2023-12-19 15:58:36
1903
原创 VUE实践优化：轮询机制与代码结构升级
我们之前探讨过，对于包含处理状态的表格数据，我们可以通过轮询的方式进行处理（轮询更新进度条：JavaScript中的定时器和异步编程技巧然而，当我们离开页面时，定时器仍会继续触发请求，这会造成资源的浪费，因为返回的数据并没有被渲染出来。最多只能同时存在一个轮询的定时器。当用户离开页面时，定时器应被关闭。当用户重新进入页面时，如果仍有数据正在处理中，应重新启动轮询。轮询应能跨页面、跨显示数量。
2023-12-19 11:01:05
1168
1
原创 Element UI 实战：跨页保存表格选中状态与判断状态可选性的高效方案
在许多 Web 应用中，数据分页是常见的操作方式。当用户在一个页面中选择了一些数据项，然后切换到另一页时，保持之前选中的项通常是用户友好的体验。同时，可能存在一些需要禁选的执行项，例如在某些状态下，用户不应该选择或执行某些操作：如当数据可以进行执行相关操作，并且需要消耗一定时间时，我们为了任务的完整执行，会在任务执行期间，禁止选中该任务的选择框（可以预防用户进行删除等操作），后续执行完毕可以恢复初始选中状态，也可以放弃选中状态。
2023-11-30 14:58:55
1200
1
原创 取消Element UI响应式设计——打造固定布局的菜单
要取消Element UI导航菜单的响应性，我们可以使用自定义的CSS样式来覆盖框架的默认样式。具体来说，我们需要设置菜单项的水平排列（flex-direction: row 或者 mode="horizontal"），并使其宽度为100%，以保持固定的布局。
2023-11-14 16:20:59
482
原创 使用JavaScript实现定时任务队列
在这篇文章中，我们将探讨如何使用JavaScript实现一个基于一定时间间隔连续执行任务队列的功能。我们将通过创建一个简单的TaskQueue类来实现这个功能，并使用setTimeout函数来控制任务的执行时间。这个TaskQueue类可以用于处理需要定时执行的任务，例如定时处理数据、进行周期性的事件触发等。
2023-11-07 15:49:45
366
原创 Antv G6入门之旅--combo图
G6是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight，为数据科学家和开发者提供了一种全新的方式来展示和探索数据。我曾经使用过 ECharts 与 D3.js，当我遇见 AntV G6 后，突感惊喜，其内含丰富的效果与强大的功能。相对于 ECharts，AntV G6 的图表种类更多，也更灵活，更容易上手；而相对于 D3.js，AntV G6 的 API 更为简单易用，适合快速上手。
2023-10-23 17:36:39
2265
4
翻译 掌握浏览器引擎模式：使用＜!DOCTYPE html＞实现跨时代网页兼容性
本文档解释了现代Web浏览器为同时处理根据Web标准和20世纪90年代后期盛行的传统做法编写的网页内容而实现的引擎模式。涵盖了基于Gecko、Webkit、Chromium和EgdeHTML等引擎的浏览器，侧重于模式选择机制，并避免使用旧版模式。目的是提供有关如何避免使用旧版模式的信息，并进行足够的研究以令人信服。
2023-10-23 16:48:07
186
原创 VUE轮询更新进度条：JavaScript中的定时器和异步编程技巧
在Web开发中，有许多场景需要实时地更新页面上的进度，例如上传文件、数据处理等。本文将介绍如何利用JavaScript中的定时器和异步编程技巧来实现实时更新进度，并探讨一些其他解决方案。本文介绍了如何利用JavaScript中的定时器和异步编程技巧实现实时更新进度的效果，同时也探讨了一些其他解决方案。根据具体场景的需求，选择合适的方法来实现实时更新将会极大地改善用户体验。
2023-09-22 17:07:17
689
原创 定制化图标——Element UI 组件图标替换指南
本篇博客将介绍如何在使用 Element UI 组件时对原生图标进行定制化替换，提供了适用于满足个性化需求的方法和技巧。
2023-09-14 16:59:10
3461
原创 D3.js入门之旅--基础讲解
D3.js（Data-Driven Documents）是一个用于创建数据可视化的JavaScript库。它使用HTML、SVG和CSS等Web标准来呈现数据，帮助开发者通过数据驱动方式构建交互式、动态的可视化图表和图形。D3.js的主要优点包括灵活性、强大的数据处理能力和对Web标准的广泛支持。在学习D3.js时，我们将了解到如何使用JavaScript操作和绑定数据，创建可扩展的可视化效果，并在图表中实现交互和动画等功能。
2023-09-12 15:53:35
1857
原创 CSS实现白天/夜晚模式切换
在网页设计和用户体验中，模式切换功能是一种常见的需求。模式切换可以为用户提供不同的界面外观和布局方案，以适应其个人偏好或特定环境。在这篇博客中，我们将探索如何使用纯CSS实现一个简单的模式切换效果，无需依赖JavaScript的运行。使用纯CSS实现模式切换功能的好处之一是它可以提供更好的性能，尤其是在移动设备上。纯CSS解决方案能够充分利用浏览器的硬件加速，并避免了JavaScript引擎的运行开销。此外，纯CSS实现还能简化代码结构，减少对外部脚本的依赖。
2023-08-28 14:24:24
1682
2
原创 树状表格子节点移动 - 在Vue.js中实现上下移动子节点的表格功能
本文介绍了如何在Vue.js框架下实现一个树状表格，其中支持选择子节点行的上下移动。通过这个功能，用户可以方便地改变子节点的顺序。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍，您可以轻松了解如何在您的Vue.js项目中应用这个功能，以满足您的特定需求。
2023-08-28 11:46:00
786
原创 树状表格父节点选择 - 在Vue.js中实现仅选择父节点的树状表格功能
本文介绍了如何在Vue.js框架下实现一个树状表格，其中只支持选择父节点的复选框。通过这个功能，用户可以方便地选择表格中的父节点，而无需关心子节点的选择。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍，您可以轻松了解如何在您的Vue.js项目中应用这个功能，以满足您的特定需求。
2023-08-25 16:48:11
717
1
原创 借用空数组方法：处理类数组的对象的实用技巧
总之，借用空数组的方法是一种方便而常见的技巧，可用于处理类似数组的对象。通过将数组的方法与这些对象绑定，我们可以使用数组的方法来处理它们，提高代码的可读性和简洁性。例如，可以使用 Array.from() 方法将类似数组的对象转换为真正的数组，然后直接使用数组的方法来操作。同样的技巧也适用于其他类似数组的对象，比如 Arguments 对象，它是一个包含函数参数的类数组对象。通过将数组的方法与类似数组的对象绑定，我们可以将这些方法应用于这些对象，就好像它们是真正的数组一样。在上面的代码中，我们首先通过。
2023-08-16 10:58:43
200
原创 提升Element UI分页查询用户体验与交互：实现修改未保存提示
我实现的功能是在element ui的分页组件中进行分页查询时，如果当前有未保存的修改数据就提示用户，用户可以选择是否放弃未保存的数据。确认放弃就重新查询数据；选择不放弃，不重新查询，并且显示条数选择框保持原样（选择框中文字与选择列表中选择项），页数跳转也是同样的功能。例子说明：当我们修改了表单某项数据但未保存时。 更改每页显示条数：我们点击显示条数选择框的 '20条/页'，此时会弹出一个提示如图。选择确定就重新查询渲染，未保存数据就丢失了；选择取消的话，不重新查询，并且显示条数保持原样
2023-08-08 14:59:16
1215
原创 TypeScript 5.2 新特性：探索 ‘using’ 关键字的强大功能
TypeScript 5.2 将引入一个新的关键字 —— 「using」，它的作用是：当离开作用域时，你可以使用 Symbol.dispose 释放掉任何内容。using 对于管理文件处理、数据库连接等资源非常有用。Symbol.dispose 是 JavaScript 中的一个新的全局符号。任何带有 Symbol.dispose 功能的都被视为“资源”—— “具有特定生命周期的对象” ——并且可以与关键字 using 一起使用。
2023-07-22 11:58:03
694
原创 如何实现并发控制的Promise队列调度器
当涉及到并发控制时，Promise是一种强大的工具，广泛应用于现代编程中。本文介绍了Promise并发控制的相关概念。总结而言，Promise并发控制是一种强大且灵活的工具，可以优化应用程序的性能和用户体验。根据具体的需求和应用场景，我们可以灵活地使用Promise并发控制来管理并发任务，并确保数据的一致性和正确性。通过掌握Promise并发控制的实践，开发人员可以更好地处理并发任务，提供高效的应用程序，并提升用户满意度。
2023-07-18 12:53:43
829
原创 详细分析CSS伪类:only-of-type
2.特定状态下的样式变化：如果在某些特定状态下，你想要为唯一的某个特定类型的标签应用不同于其他同类型标签的样式，:only-of-type 可以帮助你实现这个效果。通过使用 :only-of-type 选择器，你可以确保只有一个该类型的标签应用特定的样式，而其他相同类型的标签不会受到样式的影响。比如上述结构，因为p、span、i都是在div里唯一存在的，就可以用div>p:only-of-type,div>span:only-of-type,div>i:only-of-type来选中三者。
2023-07-17 11:06:03
413
原创 我的创作纪念日
接近一年的时间，获得了许多阅读和关注，被人认可的感觉最是能督促人前进。也接触了很多大佬，更加了解这个领域，从转发文章更多到现在基本都是自己的文章，也希望自己的文章能帮助到其他人。觉得日常接触了很多东西，但是一旦长期不用，再想拾起便是不那么容易，光说当时的构思就不复存在，还要去找各种资源未免不让人扫兴。希望记录更多日常接触到的知识，在互联网上留下不独属于自己的一小块痕迹，谁又知道十年后的自己咀嚼当下时又是什么心情呢？而且常常觉得自己懂了，但是应用时才发现相差颇多，故最终还是决定把他们都记在纸上。
2023-07-12 11:25:58
83
原创 JavaScript 生成器函数(generator)详解：优雅处理异步任务流
Generators 是 JavaScript 中的一种特殊函数，它们可以暂停执行并根据需要生成多个值。通过 yield 关键字，生成器函数可以在每次被调用时产生一个新值，这使得它们非常适合处理大量数据或需要延迟计算的场景。本文将详细介绍 generators 的作用、用法以及与其他语言特性的配合使用。
2023-07-03 15:09:16
2773
1
原创 reduce解决读取多层嵌套对象属性
可以看出官方推荐的用法是使用这个累加器可以方便的计算一个数组元素的和，通过 return 可以把每次迭代的值返回给total作为下一次的初始值，如果我们 return 一个对象的话，不就可以依次读取多层嵌套的对象的属性了吗？我们将子级结构作为上一次的值返回，从而实现遍历多层嵌套结构。在reduce函数的回调函数中，根据需要选择将子级结构与累积值（上一次的值）进行合并或者进行其他操作，并将结果作为下一次迭代的累积值返回。在使用reduce时突然发现reduce似乎可以遍历对象嵌套结构。
2023-06-30 09:27:21
318
原创 JS flat手写实现与对象进行flat
实现js的数组扁平化，flat()是ES2019引入的特性，是 JavaScript 数组的一个方法，用于将多维数组扁平化为一维数组。该方法可以接收一个可选的参数 depth，用于指定要扁平化的嵌套层数。默认情况下，它只会将数组降维一层。如果传递的参数大于 0，则会按照指定的层数进行扁平化。如果传递的参数是 Infinity，则会完全扁平化所有嵌套层级。
2023-06-27 11:33:28
569
原创 TypeError: Cannot read properties of undefined (reading ‘classList‘)
使用swiper完成轮播图时出现报错：TypeError: Cannot read properties of undefined (reading 'classList')
2023-06-25 15:49:56
1551
原创 ant design vue选择框背景色更改
因为要实现网页白天模式和夜间模式的切换，那相应文字和组件颜色也要适配对应的主题，而a-select默认的白色背景色在夜间模式下非常突兀，故我们要修改选择框和选项列表框的颜色。另外关于下面代码中的getPopupContainer这个API，是因为a-select默认相对于body定位的，故我们点开选项列表后滑动页面，选项列表会相对视口固定，即与选项框分离，使用getPopupContainer将a-select绑定到他的父节点上，这样就解决了两者分离问题。
2023-06-23 17:46:22
2736
1
原创 promise的前世今生
Promise 是异步编程的一种解决方案，比传统的异步解决方案【回调函数】和【事件】更合理、更强大。现已被 ES6 纳入进规范中。代码书写比较new Promise(请求1).then(请求2(请求结果1)).then(请求3(请求结果2)).then(请求4(请求结果3)).then(请求5(请求结果4)).catch(处理异常(异常信息))比较一下这种写法和上面的回调式的写法。我们不难发现，Promise 的写法更为直观，并且能够在外层捕获异步函数的异常信息。
2023-06-22 16:35:07
172
原创 vue3中封装echarts组件并实现夜间模式
myClass是白天模式或者夜间模式，title为图表标题，在封装的echarts组件中传入到自己封装的baseTitle组件中，data为图表的数据，color是图表中的颜色，如果对图表颜色需求较多的话，还可以将颜色细分后来封装。饼图：圆环显示，圆环中间显示数据总数，能自定义圆环各项颜色，legend实现数据名与值的显示，并且两者颜色不一致。直方图：取消横纵坐标，悬停显示信息，数据可以有不同的颜色。
2023-06-22 16:19:11
648
原创 VUE实现级联选择框与选项互斥
我们看到二级选择框的选择项并没有像一级一样直接双向绑定选项的code，因为一级选项虽然能多选，但是数据结构是对象，而二级是数组，如果直接item.secondaryIndicators[index].itemCode就有问题，故用一个secondaryIndicatorkeys来单独存储二级选项的code。功能布局如下图，实现根据一级选项的code去查询二级选项，并且其他二级选择框无法再次选中已经被选的二级选项。上面就实现了基本的级联功能，但是没用实现二级选项的互斥，下面我们来实现二级选项互斥。
2023-06-13 14:54:49
679
原创 VUE实现禁止选择未来时间的日期选择器
那么先选中59分钟再选择当前时间会导致BUG吗？我们实验一下，发现选中小时后分钟会被限制，如果之前选中的分钟在未来会被清空，需要重新选择，如果是过去或者正在发生的则会保持。PS. 虽然点开日期选择框，默认选中了当天，但是disabledTime中的current此时为null，故在if判断中要加上!此时是2023-06-13 11:41，似乎分钟没用生效？单位：年、月、日、时、分。根据考勤时间查找列表项。
2023-06-13 11:47:26
844
原创 手写call方法改变this指向
封装一个myCall函数，用来实现call函数的功能。myCall函数接收多个参数，第一个参数是fn，代表要执行的函数，第二个参数是context，代表需要显式改变的this指向，之后的参数都是fn的参数。
2023-04-07 13:38:28
321
原创 Vue数据渲染问题
经过排查后发现，是因为从服务器请求回来的数据，大部分商品数量都是1，而我们在视图上输入非法数据后，组件将这些非法数据处理为1返回app.vue，因为本身数据就为1,等于没有改变，故不会重新渲染，而我们输入的非法数据就留在的视图上。当点击任意勾选事件、增减商品数量的事件后，视图会刷新为从服务区请求回来的数据中的数量（大部分为数量1）。先将商品数量赋值为0（因为购物车中不可能为0），再赋值给商品数量为1就可以重新渲染了。场景：在购物车中，可以输入商品数量，但输入非法数据时，数量会修改为1。
2023-04-05 20:01:08
259
转载 EventLoop的宏任务、微任务执行（图文讲解）
事件循环Event Loop，这是目前浏览器和NodeJS处理JavaScript代码的一种机制，而这种机制存在的背后，就有因为JavaScript是一门的语言。单线程和多线程最简单的区别就是：单线程同一个时间只能做一件事情，而多线程同一个时间能做多件事情。而JavaScript之所谓设计为单线程语言，主要是因为它作为浏览器脚本语言，主要的用途就是与用户互动，操作Dom节点。而在这个情景设定下，假设JavaScript。
2023-03-31 23:59:30
796
转载 web性能优化的实用技巧
但是js下载仍然会阻塞其他资源的下载，如图片。如果浏览器不采用“白屏”机制，将页面内容逐步显示（如Firefox），则后加载的样式表将导致页面重绘重排，将会承担页面闪烁的风险。1.除了IE外，其他浏览器会尝试为表达式左侧的字符串分配更多的内存，然后简单的将第二个字符串拷贝到他的末尾，如果在一个循环中，基础字符串位于最左侧，就可以避免重复拷贝一个逐渐变大的基础字符串。HTML集合包含了DOM节点引用的类数组对象，一直与文档保持连接，每次你需要最新的信息时，都会重复执行查询操作，哪怕只是获取集合里元素的个数。
2023-03-26 22:22:25
417
1
原创 为什么要使用base64？
Base64编码是一种常见的二进制数据表示方式，通过将二进制数据转换为文本形式，便于传输和存储。它在许多应用场景中发挥着重要作用，例如电子邮件附件传输、HTTP协议授权信息、数据URL和图像数据存储等。虽然Base64编码会增加数据大小，但却提供了广泛的兼容性和可读性，使得二进制数据能够在文本环境中方便地处理。
2023-03-25 21:10:34
1362
转载 开源协议 - 几种开源许可比较
GPL的出发点是代码的开源/免费使用和引用/修改/衍生代码的开源/免费使用，但不允许修改后和衍生的代码做为闭源的商业软件发布和销售。而在MPL（1.1版本）许可证中，对源代码的定义是:“源代码指的是对作品进行修改最优先择取的形式，它包括:所有模块的所有源程序，加上有关的接口的定义，加上控制可执行作品的安装和编译的‘原本’（原文为‘Script’），或者不是与初始源代码显著不同的源代码就是被源代码贡献者选择的从公共领域可以得到的程序代码。LGPL是GPL的一个为主要为类库使用设计的开源协议。
2023-03-25 15:15:25
2434
前端Promise的理解的面试题
2023-04-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人