- 博客(20)
- 收藏
- 关注
RSS订阅原创 基于vue3的手写虚拟滚动
Vue3虚拟滚动实现摘要 本文展示了一个基于Vue3的手写虚拟滚动组件实现方案。通过动态计算可视区域元素，仅渲染当前可见范围内的列表项，实现高性能渲染大量数据(10万条)。核心思路包括：1)计算列表总高度作为滚动容器；2)监听滚动事件，动态计算startIndex和endIndex；3)使用slice方法截取当前可见数据；4)通过绝对定位控制元素位置。关键技术点包括响应式数据、计算属性和滚动事件处理，有效解决了大数据量DOM渲染性能问题。
2025-08-12 10:22:31
267
原创 【el-table设置滚动条到父级】
将el-table滚动条设置到父级容器的方法：首先为el-table元素添加绝对定位样式（position:absolute; width:auto; max-width:none），然后在其父容器上设置相对定位和滚动属性（position:relative; overflow:auto; height:80%）。这种实现方式可以让表格的滚动条出现在父级容器而非表格本身，适用于需要自定义滚动条位置的场景。
2025-08-12 10:13:05
183
原创 【npm的原罪，以及pnpm的优势和经验之谈】
摘要：npm存在三大痛点：幽灵依赖导致混乱、重复依赖浪费磁盘空间、安装速度慢。pnpm通过符号链接和全局存储机制解决了这些问题：消除幽灵依赖保证纯净性、硬链接共享依赖节省空间、减少I/O操作提升安装速度。团队若混合使用不同包管理器会出现lock文件冲突和依赖结构不一致问题，建议统一采用pnpm作为最优解。其优势包括可靠的依赖管理、显著的磁盘空间节约和极速安装体验。（149字）
2025-08-12 10:03:29
598
原创 关于element UI 多个元素共有一个popover 实现方法
但在大数据量或复杂业务场景下（如动态内容计算、高频交互等），会出现明显的渲染卡顿和性能问题。通过将多个数据项共享同一个Popover组件（动态内容注入+定位复用），可显著降低DOM节点数量、减少内存占用，从而使页面渲染性能获得质的提升。2.第四步的 'unit-keyword' 为手动触发popover按钮（第一步）的class名。1.第四步的this.$refs指向公用的popover的ref，第四步：点击外部取消el-popover的弹窗。第一步：自定义激活el-popover的事件。
2025-07-21 15:08:44
329
原创 前端日期处理的多种方式
对象，提供一个全新的、设计精良的日期/时间处理方案。它内置了不可变性、无歧义的 API 和完善的时区支持。（注: 该方案正在讨论中）值得一提的是，JavaScript 自身也在进化。方案三：未来的希望：Temporal API。方案二：现代日期库：day.js。的解析策略就完全不同。API 旨在从根本上取代。1.不可靠的字符串解析。
2025-07-16 10:29:01
195
原创 前端一行代码生成绝对唯一 ID
/ 示例输出: "3a6c4b2a-4c26-4d0f-a4b7-3b1a2b3c4d5e"缺点：在高并发或快速操作的场景下，它的“绝对唯一”承诺不堪一击，// 示例输出: "l6n7f4v2am50k9m7o4"是一个浏览器内置的全局对象，提供了加密相关的能力，而。方案二：crypto.randomUUID()这是 W3C 标准和现代浏览器提供的。规范的通用唯一标识符（UUID）方法专门用于生成一个符合。
2025-07-14 14:38:09
422
原创 前端轮询的多种实现方式
/WebSocket对象也有发送和关闭的两个方法，只需要在自定义方法中分别调用send()和close()即可实现。请求重叠：如果一个请求的响应时间超过了轮询间隔（例如网络慢），新的请求就会在旧的请求还未完成时发出，导致请求堆积。.catch(error => console.error('请求失败:'，error)).catch(error => console.error('请求失败:'，error))//在上一次请求完成后，再设置下一次轮询。//在上一次请求完成后，再设置下一次轮询。
2025-07-11 14:15:49
799
原创 无感刷新Token：‘双 Token 认证系统’
/ 在发送请求之前，从 state management (e.g., Vuex/Pinia/Redux) 获取 token。// 返回重试请求的结果。// 存储因 token 过期而挂起的请求。// 控制刷新状态的标志。// 2. 避免重复刷新：如果正在刷新 token，将后续请求暂存。response => response, // 对成功响应直接返回。// 3. 调用刷新 token 的 API。// 5. 重试刚才失败的请求。// 用于刷新 token 的 API。
2025-07-09 09:57:01
305
原创 如何禁止用户复制页面内容
方法一：CSS 魔法 ——/* 应用到需要禁止选择的元素上 */.no-copy {/* 兼容旧版浏览器 *//* 或者直接粗暴地应用到整个页面 */body {方法二：JavaScript 事件监听 —— 控制copy和事件。
2025-07-07 11:09:55
663
原创 前端下载blob文件流
link.setAttribute('download','文件.docx')let data= data（后台返回的文件流）
2025-07-07 10:25:20
244
原创 el-date-picker设定日期选择范围
const one = 14 * 24 * 3600 * 1000 //14天的时间戳。const maxTime = timeOptionRange + one // 之后。const minTime = timeOptionRange - one //之前。start-placeholder="开始时间"<el-form-item label="选择时间">end-placeholder="结束时间"range-separator="至"// 如何你选择了两个日期了，就把那个变量置空。
2025-07-07 10:22:57
368
原创 el-table设置滚动条到父级
1.将.el-table 标签css属性设置为position:absolute;width:auto;2.将.el-table 父标签添加css属性 position:relative;height:80%
2025-07-07 10:19:57
108
原创 node调用python
result = {"200": {"sign": "2", "msg": "进入大厅成功"}}result = {"100": {"sign": "2", "msg": "登录成功"}}result = {"300": {"sign": "2", "msg": "匹配成功"}}# 与服务器交互 虚拟请求数据时间1秒。# 与服务器交互 虚拟请求数据时间1秒。# 与服务器交互 虚拟请求数据时间1秒。# 定义接收到的不同环节码，执行不同逻辑。python文件内容。
2025-07-07 10:18:20
309
原创 前端如何优雅地实现一个“请求队列”
pool.add(() => mockApi(i)).then(result => console.log(`[${i}]收到结果:${result}`))// /12、创建一个请求池，限制并发为2const pool= new RequestPool(2);// 限制并发数为 3。// 只有当 正在运行的请求数 < 限制数 且 队列中有等待的请求时，才执行。* 一个简单的请求池/请求队列，用于控制并发。// 请求完成，空出一个位置。// 当前正在运行的请求数。// 等待的请求队列。// 尝试运行下一个。
2025-07-07 10:16:39
261
原创 仿淘宝的sku商品属性选择
console.log(this.getVertex('红色'));// 当前没有选中的元素。// 当前存在选中的元素。// 没有选择的情况。// 当前列取消选择。// 取消选择的情况。// 初始化所有都是可以选择。// 设置相关元素的状态。
2025-07-07 09:59:31
970
原创 element-table的自定义列合并
第二个元素代表colspan。* @param row:Object 需要合并的列name 如:'name' 'id'* @param val:String 需要合并的列name 如:'name' 'id'* @param rowIndex:Number 当前列的数据，由合并函数传入。* 例：rowMerge(['name','value'],* [{value:'1', name:'小明'},* {value:'2', name:'小明'},* {value:'3', name:'小明'},
2025-07-07 09:56:50
463
原创 关于ecahrts地图多图层 同时放大缩小移动方法
option.series[0].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变。option.series[0].center = option.geo[0].center //下层的geo的中心位置随着上层geo一起改变。option.series[0].zoom = option.geo[0].zoom //下层geo的缩放等级跟着上层的geo一起改变。myChart.setOption(option) //设置option。
2025-07-07 09:55:06
414
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人