![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 81
分享遇见的各种前端知识
Leviash
just for fun.
展开
-
Electron桌面应用实战:Element UI 导航栏橙色轮廓之谜与Bootstrap样式冲突解决方案
在 Electron 应用开发中,使用 Element UI 构建导航栏时遇到焦点样式异常。深入排查发现,Element UI 在处理组件焦点状态时引用了 Bootstrap 的样式规则,导致出现未预期的橙色轮廓。本文详细解析问题根源,并提出包括重写样式、禁用相关样式片段、深度定制 Element UI 组件及隔离样式作用域在内的解决方案,为开发者解决类似问题提供实战参考。原创 2024-01-29 21:50:33 · 1392 阅读 · 0 评论 -
【ECharts 实战】5分钟学会:巧设Legend与Tooltip,提升数据可视化体验
在使用 ECharts 进行复杂的数据可视化过程中,定制图表元素以适应具体业务场景和用户需求至关重要。本文将通过一个直观的实例,带领我们在短短5分钟内掌握如何利用 ECharts 对图例(Legend)与提示框(Tooltip)中的系列名称进行个性化重命名,从而显著提升图表的可读性和满足用户的个性化需求。原创 2024-01-29 11:43:31 · 1174 阅读 · 0 评论 -
Vue开发实践:解决Chrome浏览器禁止通过代码关闭窗口的问题
Chrome 浏览器中使用 window.close() 来关闭当前窗口,但是实际运行中没有关闭窗口,打开控制栏发现警告 " 只能关闭由代码打开的窗口 ":这是由于 Chrome 浏览器的安全限制,window.close() 只能关闭通过 window.open() 方法或脚本创建的窗口。本文将讲述如何跳过Chrome安全策略,实现关闭窗口功能。原创 2023-12-22 17:33:01 · 1891 阅读 · 1 评论 -
Element UI导航菜单之秘:无痕迹浏览与历史记录栈的管理
在使用 Element UI 的 el-menu 导航栏菜单时,发现history栈(历史记录栈)会不断缓存之前的记录,而在某些场景下我们可能不希望history栈(历史记录栈)中有之前的记录,即实现无痕迹流量模式。原创 2023-12-22 16:47:41 · 1415 阅读 · 0 评论 -
VUE实践优化:轮询机制与代码结构升级
我们之前探讨过,对于包含处理状态的表格数据,我们可以通过轮询的方式进行处理(轮询更新进度条:JavaScript中的定时器和异步编程技巧然而,当我们离开页面时,定时器仍会继续触发请求,这会造成资源的浪费,因为返回的数据并没有被渲染出来。最多只能同时存在一个轮询的定时器。当用户离开页面时,定时器应被关闭。当用户重新进入页面时,如果仍有数据正在处理中,应重新启动轮询。轮询应能跨页面、跨显示数量。原创 2023-12-19 11:01:05 · 1334 阅读 · 1 评论 -
Element UI 实战:跨页保存表格选中状态与判断状态可选性的高效方案
在许多 Web 应用中,数据分页是常见的操作方式。当用户在一个页面中选择了一些数据项,然后切换到另一页时,保持之前选中的项通常是用户友好的体验。同时,可能存在一些需要禁选的执行项,例如在某些状态下,用户不应该选择或执行某些操作:如当数据可以进行执行相关操作,并且需要消耗一定时间时,我们为了任务的完整执行,会在任务执行期间,禁止选中该任务的选择框(可以预防用户进行删除等操作),后续执行完毕可以恢复初始选中状态,也可以放弃选中状态。原创 2023-11-30 14:58:55 · 1477 阅读 · 1 评论 -
取消Element UI响应式设计——打造固定布局的菜单
要取消Element UI导航菜单的响应性,我们可以使用自定义的CSS样式来覆盖框架的默认样式。具体来说,我们需要设置菜单项的水平排列(flex-direction: row 或者 mode="horizontal"),并使其宽度为100%,以保持固定的布局。原创 2023-11-14 16:20:59 · 575 阅读 · 0 评论 -
使用JavaScript实现定时任务队列
在这篇文章中,我们将探讨如何使用JavaScript实现一个基于一定时间间隔连续执行任务队列的功能。我们将通过创建一个简单的TaskQueue类来实现这个功能,并使用setTimeout函数来控制任务的执行时间。这个TaskQueue类可以用于处理需要定时执行的任务,例如定时处理数据、进行周期性的事件触发等。原创 2023-11-07 15:49:45 · 454 阅读 · 0 评论 -
VSCode调试Vue项目
代码在某个平台运行时,会将运行时的状态通过某种方式暴露出来。这些状态信息可以通过某种方式传递给开发工具,以便进行UI的展示和交互。这样的交互可以辅助开发者排查问题、梳理流程,并更好地了解代码的运行状态。这就是我们通常所说的调试。在过去,我们常常需要在浏览器中进行调试,但这种方式往往显得繁琐,尤其是在只有一个屏幕的情况下,我们很难同时查看代码和调试信息。然而,VSCode 拥有内置的 Debug 功能,使得调试变得更加便捷。原创 2023-12-19 15:58:36 · 2305 阅读 · 0 评论 -
Antv G6入门之旅--combo图
G6是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight,为数据科学家和开发者提供了一种全新的方式来展示和探索数据。我曾经使用过 ECharts 与 D3.js,当我遇见 AntV G6 后,突感惊喜,其内含丰富的效果与强大的功能。相对于 ECharts,AntV G6 的图表种类更多,也更灵活,更容易上手;而相对于 D3.js,AntV G6 的 API 更为简单易用,适合快速上手。原创 2023-10-23 17:36:39 · 3070 阅读 · 5 评论 -
掌握浏览器引擎模式:使用<!DOCTYPE html>实现跨时代网页兼容性
本文档解释了现代Web浏览器为同时处理根据Web标准和20世纪90年代后期盛行的传统做法编写的网页内容而实现的引擎模式。涵盖了基于Gecko、Webkit、Chromium和EgdeHTML等引擎的浏览器,侧重于模式选择机制,并避免使用旧版模式。目的是提供有关如何避免使用旧版模式的信息,并进行足够的研究以令人信服。翻译 2023-10-23 16:48:07 · 249 阅读 · 0 评论 -
VUE轮询更新进度条:JavaScript中的定时器和异步编程技巧
在Web开发中,有许多场景需要实时地更新页面上的进度,例如上传文件、数据处理等。本文将介绍如何利用JavaScript中的定时器和异步编程技巧来实现实时更新进度,并探讨一些其他解决方案。本文介绍了如何利用JavaScript中的定时器和异步编程技巧实现实时更新进度的效果,同时也探讨了一些其他解决方案。根据具体场景的需求,选择合适的方法来实现实时更新将会极大地改善用户体验。原创 2023-09-22 17:07:17 · 846 阅读 · 0 评论 -
定制化图标——Element UI 组件图标替换指南
本篇博客将介绍如何在使用 Element UI 组件时对原生图标进行定制化替换,提供了适用于满足个性化需求的方法和技巧。原创 2023-09-14 16:59:10 · 4393 阅读 · 0 评论 -
D3.js入门之旅--基础讲解
D3.js(Data-Driven Documents)是一个用于创建数据可视化的JavaScript库。它使用HTML、SVG和CSS等Web标准来呈现数据,帮助开发者通过数据驱动方式构建交互式、动态的可视化图表和图形。D3.js的主要优点包括灵活性、强大的数据处理能力和对Web标准的广泛支持。在学习D3.js时,我们将了解到如何使用JavaScript操作和绑定数据,创建可扩展的可视化效果,并在图表中实现交互和动画等功能。原创 2023-09-12 15:53:35 · 2301 阅读 · 0 评论 -
CSS实现白天/夜晚模式切换
在网页设计和用户体验中,模式切换功能是一种常见的需求。模式切换可以为用户提供不同的界面外观和布局方案,以适应其个人偏好或特定环境。在这篇博客中,我们将探索如何使用纯CSS实现一个简单的模式切换效果,无需依赖JavaScript的运行。使用纯CSS实现模式切换功能的好处之一是它可以提供更好的性能,尤其是在移动设备上。纯CSS解决方案能够充分利用浏览器的硬件加速,并避免了JavaScript引擎的运行开销。此外,纯CSS实现还能简化代码结构,减少对外部脚本的依赖。原创 2023-08-28 14:24:24 · 1957 阅读 · 2 评论 -
树状表格子节点移动 - 在Vue.js中实现上下移动子节点的表格功能
本文介绍了如何在Vue.js框架下实现一个树状表格,其中支持选择子节点行的上下移动。通过这个功能,用户可以方便地改变子节点的顺序。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍,您可以轻松了解如何在您的Vue.js项目中应用这个功能,以满足您的特定需求。原创 2023-08-28 11:46:00 · 918 阅读 · 0 评论 -
树状表格父节点选择 - 在Vue.js中实现仅选择父节点的树状表格功能
本文介绍了如何在Vue.js框架下实现一个树状表格,其中只支持选择父节点的复选框。通过这个功能,用户可以方便地选择表格中的父节点,而无需关心子节点的选择。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍,您可以轻松了解如何在您的Vue.js项目中应用这个功能,以满足您的特定需求。原创 2023-08-25 16:48:11 · 835 阅读 · 1 评论 -
借用空数组方法:处理类数组的对象的实用技巧
总之,借用空数组的方法是一种方便而常见的技巧,可用于处理类似数组的对象。通过将数组的方法与这些对象绑定,我们可以使用数组的方法来处理它们,提高代码的可读性和简洁性。例如,可以使用 Array.from() 方法将类似数组的对象转换为真正的数组,然后直接使用数组的方法来操作。同样的技巧也适用于其他类似数组的对象,比如 Arguments 对象,它是一个包含函数参数的类数组对象。通过将数组的方法与类似数组的对象绑定,我们可以将这些方法应用于这些对象,就好像它们是真正的数组一样。在上面的代码中,我们首先通过。原创 2023-08-16 10:58:43 · 210 阅读 · 0 评论 -
提升Element UI分页查询用户体验与交互:实现修改未保存提示
我实现的功能是在element ui的分页组件中进行分页查询时,如果当前有未保存的修改数据就提示用户,用户可以选择是否放弃未保存的数据。确认放弃就重新查询数据;选择不放弃,不重新查询,并且显示条数选择框保持原样(选择框中文字与选择列表中选择项),页数跳转也是同样的功能。例子说明:当我们修改了表单某项数据但未保存时。 更改每页显示条数:我们点击显示条数选择框的 '20条/页',此时会弹出一个提示如图。选择确定就重新查询渲染,未保存数据就丢失了;选择取消的话,不重新查询,并且显示条数保持原样原创 2023-08-08 14:59:16 · 1313 阅读 · 0 评论 -
TypeScript 5.2 新特性:探索 ‘using’ 关键字的强大功能
TypeScript 5.2 将引入一个新的关键字 —— 「using」,它的作用是:当离开作用域时,你可以使用 Symbol.dispose 释放掉任何内容。using 对于管理文件处理、数据库连接等资源非常有用。Symbol.dispose 是 JavaScript 中的一个新的全局符号。任何带有 Symbol.dispose 功能的都被视为“资源”—— “具有特定生命周期的对象” ——并且可以与关键字 using 一起使用。原创 2023-07-22 11:58:03 · 768 阅读 · 0 评论 -
如何实现并发控制的Promise队列调度器
当涉及到并发控制时,Promise是一种强大的工具,广泛应用于现代编程中。本文介绍了Promise并发控制的相关概念。总结而言,Promise并发控制是一种强大且灵活的工具,可以优化应用程序的性能和用户体验。根据具体的需求和应用场景,我们可以灵活地使用Promise并发控制来管理并发任务,并确保数据的一致性和正确性。通过掌握Promise并发控制的实践,开发人员可以更好地处理并发任务,提供高效的应用程序,并提升用户满意度。原创 2023-07-18 12:53:43 · 1053 阅读 · 0 评论 -
详细分析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 · 479 阅读 · 0 评论 -
JavaScript 生成器函数(generator)详解:优雅处理异步任务流
Generators 是 JavaScript 中的一种特殊函数,它们可以暂停执行并根据需要生成多个值。通过 yield 关键字,生成器函数可以在每次被调用时产生一个新值,这使得它们非常适合处理大量数据或需要延迟计算的场景。本文将详细介绍 generators 的作用、用法以及与其他语言特性的配合使用。原创 2023-07-03 15:09:16 · 4012 阅读 · 1 评论 -
reduce解决读取多层嵌套对象属性
可以看出官方推荐的用法是使用这个累加器可以方便的计算一个数组元素的和,通过 return 可以把每次迭代的值返回给total作为下一次的初始值,如果我们 return 一个对象的话,不就可以依次读取多层嵌套的对象的属性了吗?我们将子级结构作为上一次的值返回,从而实现遍历多层嵌套结构。在reduce函数的回调函数中,根据需要选择将子级结构与累积值(上一次的值)进行合并或者进行其他操作,并将结果作为下一次迭代的累积值返回。在使用reduce时突然发现reduce似乎可以遍历对象嵌套结构。原创 2023-06-30 09:27:21 · 350 阅读 · 0 评论 -
JS flat手写实现与对象进行flat
实现js的数组扁平化,flat()是ES2019引入的特性,是 JavaScript 数组的一个方法,用于将多维数组扁平化为一维数组。该方法可以接收一个可选的参数 depth,用于指定要扁平化的嵌套层数。默认情况下,它只会将数组降维一层。如果传递的参数大于 0,则会按照指定的层数进行扁平化。如果传递的参数是 Infinity,则会完全扁平化所有嵌套层级。原创 2023-06-27 11:33:28 · 652 阅读 · 0 评论 -
TypeError: Cannot read properties of undefined (reading ‘classList‘)
使用swiper完成轮播图时出现报错:TypeError: Cannot read properties of undefined (reading 'classList')原创 2023-06-25 15:49:56 · 1745 阅读 · 0 评论 -
ant design vue选择框背景色更改
因为要实现网页白天模式和夜间模式的切换,那相应文字和组件颜色也要适配对应的主题,而a-select默认的白色背景色在夜间模式下非常突兀,故我们要修改选择框和选项列表框的颜色。另外关于下面代码中的getPopupContainer这个API,是因为a-select默认相对于body定位的,故我们点开选项列表后滑动页面,选项列表会相对视口固定,即与选项框分离,使用getPopupContainer将a-select绑定到他的父节点上,这样就解决了两者分离问题。原创 2023-06-23 17:46:22 · 3441 阅读 · 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 · 187 阅读 · 0 评论 -
vue3中封装echarts组件并实现夜间模式
myClass是白天模式或者夜间模式,title为图表标题,在封装的echarts组件中传入到自己封装的baseTitle组件中,data为图表的数据,color是图表中的颜色,如果对图表颜色需求较多的话,还可以将颜色细分后来封装。饼图:圆环显示,圆环中间显示数据总数,能自定义圆环各项颜色,legend实现数据名与值的显示,并且两者颜色不一致。直方图:取消横纵坐标,悬停显示信息,数据可以有不同的颜色。原创 2023-06-22 16:19:11 · 783 阅读 · 0 评论 -
VUE实现级联选择框与选项互斥
我们看到二级选择框的选择项并没有像一级一样直接双向绑定选项的code,因为一级选项虽然能多选,但是数据结构是对象,而二级是数组,如果直接item.secondaryIndicators[index].itemCode就有问题,故用一个secondaryIndicatorkeys来单独存储二级选项的code。功能布局如下图,实现根据一级选项的code去查询二级选项,并且其他二级选择框无法再次选中已经被选的二级选项。上面就实现了基本的级联功能,但是没用实现二级选项的互斥,下面我们来实现二级选项互斥。原创 2023-06-13 14:54:49 · 745 阅读 · 0 评论 -
VUE实现禁止选择未来时间的日期选择器
那么先选中59分钟再选择当前时间会导致BUG吗?我们实验一下,发现选中小时后分钟会被限制,如果之前选中的分钟在未来会被清空,需要重新选择,如果是过去或者正在发生的则会保持。PS. 虽然点开日期选择框,默认选中了当天,但是disabledTime中的current此时为null,故在if判断中要加上!此时是2023-06-13 11:41,似乎分钟没用生效?单位:年、月、日、时、分。根据考勤时间查找列表项。原创 2023-06-13 11:47:26 · 1053 阅读 · 0 评论 -
手写call方法改变this指向
封装一个myCall函数,用来实现call函数的功能。myCall函数接收多个参数,第一个参数是fn,代表要执行的函数,第二个参数是context,代表需要显式改变的this指向,之后的参数都是fn的参数。原创 2023-04-07 13:38:28 · 347 阅读 · 0 评论 -
Vue数据渲染问题
经过排查后发现,是因为从服务器请求回来的数据,大部分商品数量都是1,而我们在视图上输入非法数据后,组件将这些非法数据处理为1返回app.vue,因为本身数据就为1,等于没有改变,故不会重新渲染,而我们输入的非法数据就留在的视图上。当点击任意勾选事件、增减商品数量的事件后,视图会刷新为从服务区请求回来的数据中的数量(大部分为数量1)。先将商品数量赋值为0(因为购物车中不可能为0),再赋值给商品数量为1就可以重新渲染了。场景:在购物车中,可以输入商品数量,但输入非法数据时,数量会修改为1。原创 2023-04-05 20:01:08 · 353 阅读 · 0 评论 -
EventLoop的宏任务、微任务执行(图文讲解)
事件循环Event Loop,这是目前浏览器和NodeJS处理JavaScript代码的一种机制,而这种机制存在的背后,就有因为JavaScript是一门的语言。单线程和多线程最简单的区别就是:单线程同一个时间只能做一件事情,而多线程同一个时间能做多件事情。而JavaScript之所谓设计为单线程语言,主要是因为它作为浏览器脚本语言,主要的用途就是与用户互动,操作Dom节点。而在这个情景设定下,假设JavaScript。转载 2023-03-31 23:59:30 · 902 阅读 · 0 评论 -
web性能优化的实用技巧
但是js下载仍然会阻塞其他资源的下载,如图片。如果浏览器不采用“白屏”机制,将页面内容逐步显示(如Firefox),则后加载的样式表将导致页面重绘重排,将会承担页面闪烁的风险。1.除了IE外,其他浏览器会尝试为表达式左侧的字符串分配更多的内存,然后简单的将第二个字符串拷贝到他的末尾,如果在一个循环中,基础字符串位于最左侧,就可以避免重复拷贝一个逐渐变大的基础字符串。HTML集合包含了DOM节点引用的类数组对象,一直与文档保持连接,每次你需要最新的信息时,都会重复执行查询操作,哪怕只是获取集合里元素的个数。转载 2023-03-26 22:22:25 · 433 阅读 · 1 评论 -
网站建设常见安全漏洞
随着互联网的发展,网络安全问题越来越受到大家重视,如何保障网站的安全问题呢?原创 2023-03-25 21:03:55 · 272 阅读 · 0 评论 -
Web元素定位与尺寸:理解page、client、screen和offset的区别
当处理网页中的元素位置和尺寸时,常常会遇到一些属性和概念,例如 pageX、clientY、screenWidth、offsetLeft 等。这些属性用于描述元素在不同坐标系统中的位置和尺寸,理解它们的区别很重要。在这篇博客中,我们将深入探讨 page、client、screen 和 offset 的含义以及它们之间的区别。原创 2023-03-22 22:27:17 · 668 阅读 · 0 评论 -
Fetch是什么?Fetch与Axios、Ajax
XMLHttpRequest 是一个设计粗糙的 API,不符合关注分离(Separation of Concerns)的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好。Fetch 的出现就是为了解决 XHR 的问题。Fetch、Ajax、Axios区别。转载 2023-03-20 21:18:20 · 471 阅读 · 0 评论 -
什么是NPX
npx 会在当前目录下的./node_modules/.bin里去查找是否有可执行的命令,没有找到的话再从全局里查找是否有安装对应的模块,全局也没有的话就会自动下载对应的模块,如上面的 create-react-app,npx 会将 create-react-app 下载到一个临时目录,用完即删,不会占用本地资源。接下来本文就简单地聊一聊npx。--ignore-existing 告诉npx忽略本地已经存在的模块,每次都去执行下载操作,也就是每次都会下载安装临时模块并在用完后删除。转载 2023-03-20 11:25:47 · 3009 阅读 · 0 评论 -
什么是闭包?闭包的作用? 闭包会导致内存泄漏吗?
任何定义在函数或块中的变量,都可以认为是私有的,因为在这个函数或块的外部无法访问其中的 变量。闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,创建的函数可以访问到当前函数的局部变量。闭包的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中,因为闭包函数保留了这个变量对象的引用,所以这个变量对象不会被回收。由于闭包会携带包含它的函数的作用域,因此会占用更多的内存,过度的使用闭包会导致内存占用过多,因此,在绝对必要时,再考虑使用闭包。转载 2023-03-19 12:13:07 · 835 阅读 · 0 评论