- 博客(59)
- 收藏
- 关注
RSS订阅原创 解决点击同一个路由操作的时候，导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。
【代码】 解决点击同一个路由操作的时候，导致的编程式导航跳转问题,往同一地址跳转时会报错的情况。
2025-03-11 10:21:13
328
原创 前端接口频繁调用：只处理最后一次返回
在前端开发中，我们经常会遇到需要调用接口获取数据的场景。有时候，由于用户的快速操作或者页面的频繁刷新，同一个接口可能会被频繁调用。在这种情况下，我们往往只关心最后一次请求的返回结果，而前面的请求结果可能已经过时或者不再需要。
2025-02-28 10:48:46
362
原创 解析 p-limit 的源码
p-limit库通过简单的队列和计数器实现了控制并发数的功能。通过限制同时执行的 Promise 数量，它有效地避免了过多并发任务引发的性能问题。通过并发数控制任务的执行顺序。通过队列管理等待执行的任务。使用 Promise 确保异步任务的执行与错误处理。它是一个非常实用的工具，尤其适用于高并发请求的场景，保证了执行效率与资源利用的平衡。
2024-12-30 13:48:03
1082
原创 递归方式渲染嵌套的菜单项
对于递归渲染组件，Vue 可能会频繁地进行组件的重新渲染，尤其是菜单项很多的情况下，性能可能会受到影响。为了优化性能，可以通过。递归方式渲染嵌套的菜单项，这个是非常好的做法。为了避免在每个子菜单上都渲染一个新的。为了实现递归，我们可以将渲染菜单项的逻辑提取到一个子组件。来判断是否有子菜单，再决定是否渲染子菜单的部分。样式来局部控制样式，防止样式污染到其他组件。在主组件中，直接引入并使用。
2024-12-11 15:31:20
527
原创 vue3使用svg生成圆环（色块动态展示）
<template> <div class="about-view"> <div class="ring-wrapper"> <svg :width="size" :height="size" viewBox="0 0 100 100"> <circle v-for="(segment, index) in segments" :key="index" c
2024-12-04 17:28:33
573
原创 ES6 — Promise基础用法（resolve、reject、then、catch,all）
创建一个 Promise： 使用 new Promise() 创建一个新的 Promise 对象，并传入一个函数作为参数。它返回一个新的 Promise 对象，当所有的 Promise 实例都成功时，这个新的 Promise 对象才会成功；如果有任何一个 Promise 实例失败，那么这个新的 Promise 对象也会失败。它返回一个新的 Promise 对象，当第一个 Promise 实例完成时，这个新的 Promise 对象就会完成，无论其是成功还是失败。它相当于只传入失败回调函数的 then 方法。
2024-09-24 16:07:21
639
原创 使用 VueDraggable 创建可拖拽列表的全面指南
在现代Web应用程序中，拖拽功能不仅增加了用户体验的互动性，还可以使页面元素的重新排序变得更加直观和有效。Vue.js 生态系统中的组件提供了一种简单而强大的方法来实现这一功能，结合了 Vue.js 和 Sortable.js 的优势，使得创建拖拽功能变得异常容易。本文将介绍如何使用实现单列拖拽、多列拖拽、表格拖拽，并解决拖入空数组时可能遇到的问题。
2024-08-07 16:40:14
2055
原创 webpack中的 loader 与 plugin
loader主要用于实现 webpack 对不同类型模块的转换和加载，处理单个文件或文件类型。plugin主要用于执行更广泛的任务和自定义功能，通过监听 webpack 生命周期事件来执行操作，可以影响 webpack 整个打包过程。
2024-07-26 10:07:45
509
原创 数组中的对象组织成一个树状结构
转换为带有层级关系的树形结构，并在输出时展示树的顶层结构和操作后的完整部门数据。数组转换成树形结构，并输出转换后的结果和原始的。这样可以通过部门ID快速查找部门对象。这段代码的主要目的是将扁平的部门数据。这里定义了一个包含部门信息的数组。，每个部门用对象表示，包括。对象，将每个部门对象。（部门名称）等属性。
2024-06-26 15:26:58
496
原创 前端 --- 检测当前页面(窗口)的可见性状态
事件的行为在不同的浏览器中可能有所不同，因此在使用时需要注意浏览器兼容性。此外，一些移动设备或电脑的节能模式也可能会影响页面的可见性状态，进而触发这个事件。当用户切换到其他标签页、最小化浏览器窗口、或者将浏览器窗口隐藏在其他窗口后面时，页面的可见性会发生变化，此时就会触发visibilitychange事件。事件是一个在浏览器中的 Document 对象上触发的事件，用于检测当前页面的可见性状态是否发生变化。
2024-05-30 11:17:47
566
原创 swiper 点击事件失效问题
在刚开始使用是 swiper 时，点击事件有时失效，这些个问题的原因是：swiper设置loop=true时，会生成虚拟slide进行填充，对这些虚拟slide元素进行操作是无效的。当然这样往往不符合我们的要求（我们当然既要又要啦），下面的方法可以解决loop为true时点击事件对于每一个展现出来的轮播图都生效。使用html自定义属性传值时，属性必须要data-开头，在data-之后必须要有字符串，且因为大小写会失效，所以多单词时建议用“-”连接。通过html属性的方式传递给swiper包裹的子元素。
2024-05-14 16:15:15
2907
原创 scrollintoview方法滚动距离顶部距离
方法是 DOM API 的一部分，用于将元素滚动到视图中。这个方法接收一个布尔值参数。，指示是否需要滚动到视图的顶部。
2024-04-26 16:40:43
2534
原创 vue: npm run serve报错Error: ENOSPC: System limit for number of file watchers reached
原因是vue热更新监听文件过多，取消对node_modules的监听就好了。
2023-12-01 15:45:35
1150
原创 如何在 Vue 项目中解决 el-dropdown-item 点击无效的问题
当在 Vue 项目中遇到 el-dropdown-item 点击无效的问题时，可以通过在 @click 后添加 .native 来解决。
2023-11-29 17:03:21
2580
原创 vue3+ant design vue实现解析本地excel文件，导出为数组
vue3+ant design vue实现解析本地excel文件，导出为数组。
2023-08-04 09:45:41
372
原创 vuex 中dispatch 和 commit
需要注意的是，在 Vuex 中，actions 中不能直接修改 state 的状态，只能通过触发 mutations 来修改 state 的状态。方法用于触发 mutations，它接收一个 mutation 的 type 和 payload 作为参数。都是用于触发 Vuex 中的 actions 和 mutations 的方法，但是它们的作用和用法略有不同。方法用于触发 actions，它接收一个 action 的 type 和 payload 作为参数。需要注意的是，在组件中使用。
2023-07-21 17:05:07
1509
原创 在 ant Design 中取消点击 Enter 后的默认行为
使用antDesign-vue时，在表单中取消点击 Enter 后触发的默认表单提交操作
2023-07-14 17:16:04
565
原创 前端将UTC时间格式转化为本地时间格式
在前后端分离式开发中，后端返回的时间格式往往是 UTC格式的，即’2023-07-13T06:17:24.388947’，而我们需要用“YYYY-MM-DD HH:mm:ss”这种格式呈现给用户。
2023-07-14 16:51:58
942
原创 使用 Swagger 打开 .yaml 文件
你可以从 Swagger 官方仓库的 GitHub 页面下载最新的 Swagger UI ZIP 文件：https://github.com/swagger-api/swagger-ui/releases。文件，你可以使用 Swagger UI 或 Swagger Editor。无论你选择使用 Swagger UI 还是 Swagger Editor，都能帮助你打开和查看。在 Swagger UI 页面的右上角，你会看到一个输入框。将下载的 ZIP 文件解压缩到你想要放置 Swagger UI 的目录。
2023-07-04 17:01:19
3793
原创 使用map方法对数组进行遍历并返回一个新的修改后的数组，而不改变原数组
【代码】使用map方法对数组进行遍历并返回一个新的修改后的数组，而不改变原数组。
2023-04-12 18:05:59
653
原创 Vue监视数据的原理
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()特别注意：Vue.set(）和 vm.$set()不能给vm 或 vm的根数据对象 添加属性！Vue.set(target，propertyName/index，value）或。通过setter实现监视，且要在new Vue时就传入要监测的数据。（1）.对象中后追加的属性，Vue默认不做响应式处理。2.Vue.set(）或vm.$set()3.如何监测数组中的数据？
2023-03-17 09:45:21
82
原创 Vue 中 computed 和 watch 的区别?
当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。computed 是计算属性, 可以根据 data 中的数据成员,动态计算出一个新的数据成员(这个数据成员在 data 中并不存在), 计算属性的函数必须有返回值;watch 是监视器, 可以监视 data 中某一个数据成员的改变或路由中的某些属性的改变, 可以根据这个改变, 做一些其他操作(不仅仅局限于更新其他相关数据).watch是监听数据变换，没有缓存。
2023-03-15 08:29:22
193
原创 Vue router 路由
路由路由（英文：router）就是对应关系。前端路由：Hash 地址与组件之间的对应关系。SPA 与前端路由SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！前端路由的工作方式① 用户点击了页面上的路由链接② 导致了 URL 地址栏中的 Hash 值发生了变化③ 前端路由监听了到 Hash 地址的变化
2022-05-16 20:20:10
258
原创 Vue2 自定义指令
什么是自定义指令vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。vue 中的自定义指令分为两类，分别是：⚫ 私有自定义指令⚫ 全局自定义指令私有自定义指令在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：directives:{// 为绑定 HTML 元素设置红色字体 color:{ // el 代表此时要绑定的 DOM 结构 bind(el){
2022-05-05 15:55:57
799
原创 Vue2 插槽 （默认插槽，具名插槽，作用域插槽）
插槽 (slot)作用：让父组件可以往子组件指定位置插入 html 结构，也是组件的一种通信方式。分类: 默认插槽，具名插槽，作用域插槽。默认插槽父组件（此时 Count 是一个组件）: <Count> <div> html 结构</div> </Count>子组件： <template> <div> &
2022-05-04 20:37:57
2202
原创 vue2 动态组件
什么是动态组件动态组件指的是动态切换组件的显示与隐藏。如何实现动态组件渲染vue 提供了一个内置的 组件，专门用来实现动态组件的渲染默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态。例如：<button @click="coms = 'Left'">渲染 Left组件</button> <button @click="coms = 'Right'">渲染 Right组件</button>
2022-05-01 17:27:44
682
1
原创 js 数组的 forEach,some,every,reduce,sort 方法
forEach() 方法的使用forEach 遍历数组的每一项const arr = ['小红','倪大红','苏大强','我滴宝'] arr.forEach((item,index)=>{ if(item === '苏大强'){ console.log(index); // 2 } });some() 方法的使用从开始便利找到符合条件的便停止便利，相比 forEac
2022-05-01 17:14:18
471
1
原创 ref 引用
什么是 ref 引用ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。使用 ref 引用 DOM 元素<h3 ref="myh3">MYRef 组件</h3><button @click="getRef">获取 $refs 引用</button>metho
2022-05-01 16:47:45
1087
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人