- 博客(21)
- 收藏
- 关注
RSS订阅原创 组件缓存（切换页面缓存问题)
这段代码展示了Vue.js中使用动态组件的实现方式。通过<keep-alive>包裹动态组件可以缓存组件状态，避免重复渲染。<component :is="Component" :key="componentKey"/>中的:is属性指定要渲染的组件，:key属性确保组件在变更时正确销毁和重建。这种方式适用于需要动态切换或缓存组件的场景，能有效提升应用性能。
2025-11-05 09:00:04
101
原创 table表格组件封装
摘要：本文展示了一个基于Vue 3和Element Plus的表格分页组件实现方案。组件支持动态列渲染、自定义插槽列、操作按钮(编辑/删除)、分页功能、加载状态显示和合计行计算等特性。通过props配置表格行为和样式，使用插槽机制实现内容自定义，封装了分页事件处理逻辑。组件采用响应式设计，高度可定制化，包含序号列、表格样式优化等功能，适合作为基础组件在各类管理系统中复用，实现统一风格的表格展示和交互。
2025-11-05 08:59:44
141
原创 el-tree组件封装
本文介绍了一个基于Element UI Tree组件的自定义树形结构实现方案。该组件在节点右侧添加了可自定义的操作按钮，并提供了数据处理方法generateTreeDatas将原始数据转换为树形结构所需格式。组件支持父节点和子节点的差异化样式，包括按钮样式、文字颜色和背景等视觉区分。数据结构采用固定示例格式，包含名称、地址、值等字段，支持单层子节点扩展。通过scoped样式实现了节点内容的灵活布局和交互效果，包括按钮悬停状态等细节处理。该方案适用于需要树形展示并附带操作功能的场景。
2025-11-04 13:51:41
155
原创 el-tag组件封装
摘要：本文实现了一个标签管理组件，包含新增、删除和批量删除功能。使用Vue3+TypeScript+Element Plus开发，通过网格布局展示标签列表，支持单选和多选操作。组件核心功能包括：1)切换删除模式并处理多选状态；2)单个标签删除确认；3)带进度显示的批量删除功能；4)响应式样式调整，包括滚动条美化、选中状态高亮等。特别优化了批量删除操作的用户体验，添加了加载动画和进度提示，同时通过样式隔离确保组件独立性。
2025-11-04 13:51:30
210
原创 年月日转换为时间戳
将日期字符串转换为11位秒级时间戳的方法：首先使用Date.parse()将日期字符串解析为毫秒级时间戳，然后通过Math.floor(date/1000)除以1000并向下取整，最终得到10位的秒级时间戳（实际是10位而非11位）。这种方法适合需要精确到秒的时间计算场景。
2025-11-03 10:13:32
101
原创 el-tableb表格隔行变色
【摘要】本文介绍了如何在Element UI的el-table组件中实现单元格样式动态设置。通过在表格上添加cellStyle事件绑定，并使用JavaScript回调函数判断行数据条件（如单数/双数），可实现单元格背景色的动态变化（如单数红色、双数绿色）。核心代码通过返回包含CSS样式的对象（如rgba背景色）来控制单元格外观，提供了一种简单高效的表格条件样式解决方案。
2025-11-03 10:12:32
108
原创 时间戳转换年月日
这是一个将Unix时间戳转换为格式化日期字符串的JavaScript函数。它接收秒级时间戳参数，先转换为毫秒后创建Date对象。然后获取年、月、日信息，其中月份经过加1处理（因为getMonth()返回0-11）并补零，日期也补零。最终返回"YYYY-MM-DD"格式的字符串。函数简洁实用，适用于前端日期格式化需求。
2025-11-03 10:09:37
92
原创 页面导入文件
本文介绍了使用Element UI上传组件实现文件上传功能的关键代码片段。通过el-upload组件配置手动上传模式，当文件变化时触发uploadHttpRequest方法。重点说明了必须使用FormData对象包装文件数据再发送，否则会导致后台接口报错。代码展示了如何创建FormData对象、添加文件数据以及调用接口的完整流程，最后在成功上传后刷新列表数据。这为前端文件上传功能的实现提供了实用参考。
2025-11-03 10:08:00
103
原创 下载 / 导出文件
摘要：window.location.href是JavaScript中用于获取或设置当前页面URL的属性。通过将其赋值为新URL（如"http://地址+参数"），可以实现页面跳转功能。这种跳转方式会将目标URL加入浏览器历史记录，支持带参数的动态跳转。常用于表单提交后跳转、页面权限验证跳转等场景，是前端开发中基本的页面导航方法之一。代码示例展示了如何通过地址拼接参数实现带参跳转。
2025-11-03 10:03:28
96
原创 vue3+pinia 封装 websocket,全局可用--单接口/多接口
本文介绍了WebSocket在前端应用中的实现方法。首先封装了websocket.js模块，包含连接状态管理、心跳机制、断线重连等功能，并导出创建、发送和关闭连接的方法。随后在Vuex中创建websocketStore模块，初始化WebSocket连接并定义数据处理方法。最后在Vue组件中通过watch监听WebSocket数据变化，在mounted钩子中初始化连接。该方案实现了WebSocket的完整生命周期管理，包括连接建立、消息接收、异常处理和断线重连等核心功能。
2025-10-30 15:30:13
148
原创 获取本地时区的当天一整天日期（例如北京时间）
这段代码实现了一个获取当天日期范围的函数getDay()。它首先获取当前本地时间，然后设置开始时间为当天凌晨0点，结束时间为次日凌晨0点前1秒（即23:59:59）。通过setHours()和setDate()方法进行时间设置，最后将这两个时间点转换为ISO格式字符串返回。关键点包括：1)使用本地时间计算；2)正确设置24小时时间范围；3)返回ISO格式的UTC时间字符串。
2025-09-30 09:25:28
239
原创 如何把遍历出来的多个数据组成一个数据
这段代码通过解析JSON数据中的堆区信息，将每个堆区的名称和重量组合成字符串，并用逗号连接所有堆区信息后添加回原对象。具体流程包括：遍历数据、解析JSON、映射处理每个堆区数据、拼接字符串，最后将处理结果存入对象的heapInfo属性中。
2025-09-30 09:24:29
98
原创 状态管理pina(子组件之间的相互通信)
本文介绍了使用Pinia状态管理监听路由变化的方法：1)创建childMenuStore存储选中项；2)在子菜单组件中通过setSelectedItem更新状态；3)在目标组件中读取并使用存储的选中项数据。通过Pinia实现了跨组件状态共享，简化了路由参数传递过程。
2025-09-30 09:23:32
228
原创 vue3 ts 遍历数组的数据或者事件每隔几秒切换(定时器)
这段Vue3代码实现了一个轮播展示功能。通过items数组存储展示项，使用setInterval定时器每2秒切换一次当前显示的数组项（currentItem）。当到达数组末尾时自动重置到第一项。组件挂载时启动定时器，卸载时通过onBeforeUnmount清除定时器防止内存泄漏。代码同时展示了一个8秒获取股票数据的定时器示例，体现了组合式API（ref、computed等）和生命周期钩子（onMounted）的使用。
2025-09-30 09:09:36
230
原创 ts 修改 enum 常量内容
摘要： TypeScript中的enum是一种定义命名常量的特殊类，编译后会转为对象字面量，运行时其值不可直接修改。若需动态调整，可通过映射类型和类型断言实现，但受类型系统限制，实际修改可能无效。例如，强制转换enum为映射类型后尝试修改值（如enumValues.A=10），类型检查会阻止操作，输出仍为初始值。此机制体现了TypeScript对枚举安全性的保护。
2025-09-30 09:07:26
318
原创 antdesign table自带分页pagination
本文介绍了Vue3中使用reactive创建分页器对象的方法。通过定义current、pageSize等属性实现分页功能，包含总数显示和页码变更回调。当页码变化时，会触发getList方法获取新数据。最后还提供了Ant Design分页组件的样式覆盖示例，调整了分页器的边距和字体大小。这段代码展示了前端分页功能的典型实现方式。
2025-09-29 10:55:03
213
原创 父组件获取子组件的数据
该摘要介绍了Vue3中子组件向父组件传递数据的方法。子组件通过defineEmits定义事件，用emits触发'getOperateData'事件并传递date1、date2参数。父组件通过v-on或@监听该事件，定义getOperateData方法来接收子组件传递的参数。整个过程展示了Vue3中父子组件通信的基本模式。
2025-09-26 10:39:22
83
原创 pina动态获取路由
本文介绍了如何在Pinia状态管理库中创建和使用路由存储。首先在store目录下创建route/index.ts文件，定义了一个名为'User'的store，其中包含menuRoutes状态来存储公共路由。然后通过import引入并在需要的页面中使用userStore()获取该store实例，通过userStore.menuRoutes访问存储的路由数据。整个流程展示了Pinia的基本用法，包括store定义、状态管理和组件中的使用方式。
2025-09-18 08:42:41
120
原创 antdesign 表格双击行事件
摘要 这段代码展示了如何在表格组件中处理双击事件。通过自定义customRow属性调用handleClick函数，该函数返回一个包含onDblclick事件处理器的对象。当用户双击表格行时，会触发事件并打印当前行记录record到控制台。这种实现方式适用于需要捕获表格行双击操作并获取对应行数据的场景。
2025-09-18 08:40:45
114
原创 git拉取代码导致的路由ts解析错误
摘要：本文介绍了如何通过在src/types目录下创建vue-shims.d.ts文件来解决Vue路由解析错误问题。该声明文件使用declare module语法为*.vue文件添加类型定义，将Vue组件导出为Component类型，确保TypeScript能正确识别Vue单文件组件。这种方法适用于TypeScript项目中出现的Vue组件类型识别问题。
2025-09-18 08:33:14
124
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人