- 博客(163)
- 收藏
- 关注
RSS订阅原创 Element Plus `el-table` 列合并教程 行合并的教程（直接项目落地）
层级数据表格合并实现方案 本文介绍了如何将树形层级数据渲染为可编辑表格并实现单元格合并效果。方案基于Element UI的el-table组件，主要解决三个问题： 数据扁平化：将"一级→二级→三级"的层级结构转换为普通行数据 单元格合并：通过计算rowspan实现前两列纵向合并 交互功能：每行支持输入框和计算按钮操作 实现步骤： 使用span-method方法动态控制单元格合并 预处理数据时计算每组的行数作为合并依据 通过Map结构记录分组信息，生成rowspan映射表 适用场景包括指标
2026-04-21 15:26:51
106
原创 HTML头部元信息避坑指南
本文深度解析网页头部关键元信息的正确配置方式，涵盖charset、lang和meta三大易错点。重点指出：1) charset=UTF-8必须前置以避免乱码；2) lang属性直接影响SEO和屏幕阅读器体验；3) meta标签需规范使用，包括viewport适配移动端、description优化搜索摘要、robots控制收录等。同时提供标准化模板和团队协作清单，强调正确配置元信息可显著提升页面稳定性、搜索可见性和可访问性，避免常见的技术债积累。文末附快速自检指南，帮助开发者在3分钟内完成基础校验。
2026-04-16 09:40:30
426
原创 微信小程序“记住密码”功能的实现与落地 vue3+ts的细致解析
本文介绍了在Vue3+TypeScript+uni-app框架下实现"记住密码"功能的完整方案。该功能通过新增复选框组件、响应式状态管理和缓存机制，实现了登录页面账号密码的自动回填与持久化存储。方案包含UI层改造、状态管理、缓存处理等核心模块，并详细说明了页面加载时的回填逻辑和登录成功后的保存/清理流程。同时强调了安全风险注意事项，建议高安全场景采用加密凭证或服务端二次校验。文章还提供了完整的测试用例清单和可复用组件清单，确保功能在多端环境下的兼容性和一致性。该实现已在项目中落地，可作为
2026-04-15 15:37:10
323
原创 【进阶版】一篇弄懂Vue3 数据流——后端分页与前端协同（独立学习版）
本文介绍了如何将前端列表从本地分页升级为后端接口分页的实践方案。核心内容包括：明确前后端职责划分（后端负责分页切片，前端管理状态）、设计标准请求协议、前端状态管理方案、核心请求函数模板实现、三种交互入口处理（首屏/查询/触底）、前后端筛选协同策略、竞态问题解决方案，以及常见错误场景分析。文章强调通过清晰的状态管理（loading/finished/pageNo）、查询与分页解耦（reset/loadMore）和竞态处理来保证分页列表的稳定性，并建议封装可复用的组合式Hook提升开发效率。最终指出数据流清晰度
2026-04-14 19:33:17
92
原创 Vue3 列表数据流：从赋值入门到进阶（独立学习版）
本文介绍了构建可查询、可分页、可渲染列表的核心数据流架构。重点提出了三层数据分层思想：源数据层(sourceData)保留原始数据，结果层(filteredData)处理筛选逻辑，展示层(visibleData)负责分页显示。文章详细讲解了从初始化、查询筛选到分页加载的标准实现流程，并指出了常见错误（如直接修改源数据、忘记重置分页等）。最后给出了推荐命名规范和最小可运行示例，强调列表页稳定的关键在于"源数据不动，结果数据承接条件，展示数据只负责窗口"的分层设计理念。
2026-04-14 19:31:02
311
原创 Vue3 + TS 实现小程序留言板功能，查询新增全概括
本文介绍了留言查询功能的实现，包含页面配置和Vue组件开发。在pages.json中注册了留言相关页面，并设置自定义导航栏样式。messageSelect.vue组件实现了留言查询功能，包含标题关键字搜索、状态筛选（全部/待处理/已处理）、分页加载和统计展示。留言列表显示标题、状态、提交时间和附件数量，支持点击查看详情。组件使用模拟数据，包含三种附件类型（图片/PDF/Excel）的示例，并实现了加载状态提示和空数据展示。
2026-04-09 15:25:36
98
原创 别再乱用 any 了！Vue3 项目 TS 类型定义最佳实践
本文探讨了Vue3+TypeScript项目中过度使用any类型的问题与解决方案。作者指出any会破坏类型安全性，导致重构困难、文档缺失等问题。文章从组件层、响应式数据、组合式函数、状态管理等角度，提供了具体替代方案：使用接口定义Props、联合类型建模、泛型标注、unknown处理外部数据等。特别强调在defineProps、模板ref、Pinia等场景中应避免any，推荐使用类型守卫、工具类型等工程化手段确保类型安全。通过系统化的类型约束，可以提升代码可维护性和开发体验，充分发挥TypeScript在V
2026-04-08 15:05:24
344
原创 UniApp 小程序获取微信手机号完整笔记（Vue3 + TS）
本文详细介绍了在UniApp小程序中实现微信官方手机号快速验证组件的完整方案。首先概述了该功能的适用场景（用户登录/注册、账号绑定等）和前提条件（需完成企业认证、开通接口权限）。然后提供了基于Vue3+TS的前端页面代码实现，包含授权按钮、手机号展示区域和回调处理逻辑。重点说明了通过云函数解密手机号的核心方法，包括错误处理和用户授权状态判断。文章还包含详细的样式代码，确保UI界面美观统一。该方案解决了小程序获取用户手机号的常见需求，同时保证了数据安全性和用户体验。
2026-04-03 11:45:50
285
原创 小程序文件上传怎么做？一套可复用的 UniApp 上传+预览 Demo
文件上传与预览（参考版）</view>用于后续业务接入：上传后展示状态，成功后支持真实文件预览
2026-04-02 21:32:04
298
原创 `摸鱼决策轮盘`【vue3+ts前端实战小项目】
这篇文章介绍了一个用Vue 3实现的"摸鱼决策轮盘"组件。该组件允许用户输入多个选项（默认包含写文档、改Bug等），通过点击开始/停止按钮随机选择一项作为当日指令。核心功能包括：将输入内容分割为选项数组、实现轮盘滚动动画、随机停止选择结果。组件采用响应式设计，包含禁用按钮状态、预设选项添加等功能，并使用了Scoped CSS进行样式隔离。这个趣味小工具可以帮助用户在犹豫不决时随机决定下一步行动，代码简洁易懂，适合作为Vue 3组合式API的实践示例。
2026-03-31 16:23:45
96
原创 Vue3 + TypeScript 组件开发速查表（50+ 实用场景）
这是一份面向真实项目的 Vue3 + TypeScript 组件开发进阶速查表，覆盖 50+ 高频场景，按“场景-坑点-建议”拆解，包含 props 类型设计、事件协议、v-model、多状态管理、插槽扩展、交互细节、工程化与性能优化，并附可直接套用的代码模板和发布前自检清单，适合团队统一开发规范与个人查漏补缺。
2026-03-31 14:36:17
707
原创 Vue3 + TypeScript 组件开发速查表新手速成手册
本文从 Vue3 + TypeScript 组件开发的高频需求出发，用新手能直接落地的方式讲清了 `props`、`emits`、`v-model`、响应式、插槽和模板 ref 的标准写法，并附带常见报错对照与 7 天练习路线。适合想快速建立组件开发规范、减少低级报错的前端同学收藏实战。
2026-03-31 14:21:29
378
原创 Vue3 + TypeScript 20 个常见报错
有新报错时，优先看完整 TS 报错栈和行号，再对照上表关键词检索即可。函数参数、事件回调、子组件 emit 的类型和实际传入不一致。模板里用的属性 / 方法在组件里没声明，或类型推断不到。模板 ref 与变量名冲突，或 DOM 尚未挂载就读取。宏只能在编译期、顶层调用，不能放在函数或条件里。在运行时只读，类型上常推断为 readonly。工作区选用项目内的 TypeScript；组件未导入、未全局注册，或名称与标签不一致。同步执行阶段调用（或符合插件要求的上下文）。里“有默认值”冲突，或类型写法不兼容。
2026-03-30 19:50:12
354
原创 Vue 3 变量定义、computed 与函数：怎么选、常错点（详解版）
本文详细介绍了Vue 3中变量定义、计算属性和函数的使用选择与常见错误。主要内容包括： 将代码分为三类：状态（用ref/reactive）、派生状态（优先用computed）和行为与副作用（用普通函数） ref的基本用法与适用场景，强调.value的重要性，以及如何处理对象和数组 reactive的特点与解构陷阱，建议使用toRefs保持响应式 computed的本质是带缓存的计算，适用于派生数据但不适合所有场景 提供选择建议：新手多用ref，熟悉解构可用reactive，列表数据推荐ref形式 强调常见错
2026-03-30 14:25:28
50
原创 Vue 3 变量定义、computed 与函数----怎么选
Vue 3 状态管理核心要点 核心概念区分 状态：使用 ref/reactive 定义可变数据 派生状态：使用 computed 计算属性 行为：使用普通函数或箭头函数定义操作 变量定义选择 ref：适合单个值或整个对象（需.value访问） reactive：仅适用于对象类型（直接访问属性） computed：用于依赖其他状态的计算结果 常见错误 在computed中执行副作用操作 解构reactive对象丢失响应性 数组/对象修改方式不当导致响应丢失 方法定义 函数声明式：function handle
2026-03-30 10:04:18
52
原创 前端与项目学习【迅速提升+避免踩坑+巩固技术】
本文是前端与项目学习的备忘指南，巩固和本仓库相关的实践，避免“能跑但不懂”说明：第 2 节为工程里反复出现的典型易错类型重点总结了技术要点和工程实践中的常见问题。内容涵盖JavaScript/TypeScript核心概念、Vue 3最佳实践、uni-app开发技巧，以及monorepo项目架构和同步机制。特别整理了工程中易反复出现的8类问题，如目录混淆、环境变量管理等，并提供了实用建议。还包含CSS布局技巧、代码阅读方法、学习路径推荐等内容，旨在帮助开发者避免常见陷阱，提升开发效率和代码质量。
2026-03-30 09:54:39
154
原创 Uni-app 页面跳转 API 场景对照表（`navigateTo` / `redirectTo` / `switchTab` / `reLaunch` / `navigateBack`）
本文总结了 Uni-app 中常用的页面跳转 API 使用场景，包括 navigateTo、redirectTo、switchTab、reLaunch 和 navigateBack。通过对比表格清晰展示了各 API 的特性（是否保留当前页、是否可返回、是否可跳转 tabBar 页面）和典型应用场景。文章还提供了每个 API 的通俗解释、示例代码、选型口诀以及常见问题解决方案，并建议封装路由工具以提高开发效率。最后通过一个完整业务流示例展示了各 API 的实际应用组合方式。
2026-03-27 11:50:43
317
原创 Uni-app 小程序页面跳转带参实战笔记（含对象传参与防坑）
本文总结了小程序页面跳转传参的实践方案。基础方法是使用URL query参数传递简单值（需encodeURIComponent处理），在目标页通过onLoad接收并转换类型。对于对象参数，需先JSON.stringify再编码传递。推荐采用"对象+关键字段兜底"模式，既传递完整对象又保留核心字段作为备份。文章还列举了常见问题（参数名不一致、忘记编解码、类型错误等）和工程建议：线上环境优先使用id请求数据，或采用id+关键字段组合方案。最后提供了可直接复用的跳转模板代码，包含参数传递、异常
2026-03-27 11:33:40
427
原创 父元素 display: flex 后，子元素在宽度、排列、对齐上的常见状态。
Flex布局核心要点速查：父元素设为display:flex后，子元素进入主轴/交叉轴计算模型。子元素宽度由flex-grow/shrink/basis三要素决定，常见组合包括flex:1（平分）、flex:none（固定）等。关键注意点：1）flex-wrap控制换行；2）justify-content/align-items控制对齐；3）min-width:0解决内容撑爆问题；4）固定宽度需配合flex-shrink:0。实战建议：先明确子元素宽度需求（固定/内容自适应/平分），再选择合适的flex组合
2026-03-26 19:40:16
544
原创 扩展运算符（Spread Operator）详细教程
创建数组副本：避免修改原数据保持数据独立性：防止意外的副作用提高代码可维护性：使数据流更清晰在你的 ECharts 数据处理场景中，这是最佳实践，确保图表数据不会相互影响。
2025-09-09 11:36:16
296
原创 一个基于 Vue 3 + TypeScript 的天气展示组件，支持当前天气信息和多日预报展示
【代码】一个基于 Vue 3 + TypeScript 的天气展示组件，支持当前天气信息和多日预报展示。
2025-08-28 15:05:30
461
原创 基于markdown封装的前端文档编辑工具，markdown.js的解析与应用
使用Markdown组件渲染内容 ：将创建的Markdown组件应用到SPA中的页面或子组件里，动态渲染Markdown文本。创建Markdown组件 ：开发一个封装了markdown.js解析功能的Vue/React/Angular组件。安装markdown.js ：如果尚未安装，可以使用npm或yarn等包管理器安装markdown.js。强调 ：用 * 或 _ 包裹文本来实现斜体，用 ** 或 __ 实现粗体。水平线 ：使用三个以上的 --- 、 *** 或 ___ 来创建。
2025-07-24 20:11:41
443
原创 echarts 让 y轴刻度自适应不要从0开始
在使用 ECharts 创建图表时，有时候我们希望 Y 轴的刻度能够自适应数据范围，而不是从 0 开始。
2025-03-31 19:22:02
1782
原创 el-table实现表头嵌套、表头单元格合并、内容区域单元格实现同值自动跨行
【代码】el-table实现表头嵌套、表头单元格合并、内容区域单元格实现同值自动跨行。
2025-03-31 19:21:15
293
原创 当给父容器设置了 display: flex后影响其子元素的宽度和对齐方式的解决办法
Flexbox 布局会影响其子元素的宽度和对齐方式。在 Flexbox 布局中，子元素（也称为 flex 项）的宽度默认会根据其内容或设置的 flex 属性来调整。
2025-01-13 14:45:06
1143
摸鱼决策轮盘 - 纠结要不要继续卷？点一下，轮盘替你做决定
2026-03-31
一个基于 Vue 3 + TypeScript 的天气展示组件
2025-08-28
基于markdown封装的前端文档编辑工具，markdown.js的解析与应用
2025-07-24
echarts 仪表盘,仪表盘
2025-06-01
echarts地图添加蒙版图片，多图层地图实现天气信息展示
2024-11-11
vue3实现一个天气展示项目
2024-05-20
前端效果-旋转雷达效果组件 背景
2024-05-14
前端蓝色旋转地球宇宙动态背景
2024-05-13
java开发规范ppt & pdf文档
2024-04-17
软件设计师历年真题软件工程试题筛选
2024-04-09
前端面试题带答案最全合集，前端面试八股文
2024-04-09
javascript网页设计期末作业-基于html和js写的一个抽签系统
2024-03-14
可以利用css滤镜随意修改的数据展示卡片
2024-03-20
C语言零基础项目：推箱子游戏 期末大作业，毕业作业
2024-03-20
基于uniapp封装的card容器 带左右侧两侧标题内容区域
2024-01-09
深蓝色大屏系统登陆页面
2023-12-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人