- 博客(47)
- 收藏
- 关注
RSS订阅
原创 从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router、pinia、echarts
从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router、pinia、echarts
2024-07-23 17:41:22
3211
原创 CSS 折叠引发的 scrollHeight 异常 —— 一次 Blink 引擎的诡异 Bug
项目中遇诡异滚动问题：外层滚动容器渲染消息列表，答案消息的思考步骤可折叠，折叠时用 max-height:0、opacity:0、overflow:hidden实现动画。普通正常，但步骤高约 18000px 时，折叠后容器底部现大片空白，scrollHeight异常约 12000。排查为 Blink 引擎（Chrome/Edge）边界 Bug——该 CSS 组合未正确约束 scrollHeight，致内部高度泄漏。可用 contain:layout或 transform:scaleY(0)解决，最终选后者。
2026-02-14 16:23:59
410
原创 移动端惯性滚动下 Click 事件失效：底层原理深度解析
移动端惯性滚动下 Click 事件失效原理分析 在移动端开发中，惯性滚动状态下点击事件失效的根本原因是浏览器采用了"制动优先"原则。当用户快速滚动时，触摸动作会被滚动控制器拦截，优先判定为减速指令而非点击意图。现代浏览器的多线程架构进一步加剧了这一问题：合成器线程直接处理滚动动画，而主线程负责事件派发，导致点击事件链（touchstart→touchend→click）在滚动状态下被截断。相比之下，touchstart作为原子级物理信号能即时触发，不受此限制。
2025-12-22 17:00:06
715
原创 vue2中transition使用方法解析，包含底部弹窗示例、样式未生效踩坑记录
本篇博客围绕Vue2中Transition组件展开，核心介绍其通过自动切换CSS类名实现过渡动画的原理，自定义name属性可避免全局样式冲突。结合底部弹出弹窗实战示例，讲解通过v-if控制弹窗显隐触发动画，样式层利用transform控制垂直位移、opacity实现淡入淡出，逻辑层以单布尔值管控弹窗状态的实现方式。还分析了动画类样式不生效的问题：容器样式后定义覆盖transform属性，给出调整样式书写顺序、移除冲突属性、临时提高动画类权重三种解决方案，最后总结掌握类名时序和样式优先级规则的重要性。
2025-12-01 15:24:40
830
原创 Vue 2 响应式系统常见问题与解决方案（包含_demo以下划线开头命名的变量导致响应式丢失问题）
Vue 2的响应式系统基于Object.defineProperty实现，存在一些容易忽略的陷阱。本文详细分析了常见的响应式问题，包括数组变更检测限制、下划线前缀属性命名陷阱等。重点介绍了使用_开头属性名会导致Vue无法代理该属性，从而失去响应式的问题。同时探讨了深拷贝与响应式的关系，JSON.parse(JSON.stringify())虽能实现深拷贝但会丢失响应式。文章提供了多种解决方案，如使用$set确保响应式、避免使用特殊前缀命名、正确处理数组更新等。通过理解这些陷阱和最佳实践，开发者可以避免Vu
2025-10-21 13:37:51
377
原创 移动端触摸事件与鼠标事件的触发机制详解
本文解析了移动端触摸与鼠标事件的触发机制。在移动设备上，一次触摸操作会按 “touchstart→touchend→mouseenter→mousemove→mousedown→mouseup→click” 顺序触发事件，点击其他区域还会触发 mouseleave。这是浏览器为兼容桌面端交互设计的模拟机制，既触发原生触摸事件，又模拟鼠标事件。文章分析了该机制的历史原因与逻辑，指出可能的事件冲突问题，建议通过设备类型判断差异化绑定事件。同时提供测试 Demo，帮助开发者直观理解触发顺序，助力解决移动端交互开发
2025-09-15 17:06:24
1339
原创 使用Whistle自定义接口返回内容：Mock流式JSON数据全解析
本文详细介绍了使用 Whistle 工具 Mock 流式 JSON 数据的完整流程。从定位接口、准备 Mock 数据到配置基础规则，重点解决了流式 JSON 因响应头不符导致的页面加载问题。通过自定义响应头为 text/event-stream，结合具体配置示例，帮助开发者快速实现接口 Mock，同时提供常见问题排查技巧，适用于需要调试 SSE 格式接口的场景。
2025-07-16 15:21:28
1338
原创 Vue2函数式组件实战：手写可调用的动态组件，适用于toast轻提示、tip提示、dialog弹窗等
在Vue2开发中，函数式组件提供了一种动态调用的灵活方案，特别适合全局弹窗、消息通知等需要脱离当前组件树的场景。本文通过实战代码演示如何实现一个可命令式调用的组件：通过`Vue.extend`创建构造器，结合单例模式管理实例，并自动处理DOM挂载与销毁。相比传统组件写法，函数式组件无需预置模板即可在任意位置调用，但需注意手动管理实例生命周期以避免内存泄漏。文章详细剖析了核心实现逻辑，对比了不同方案的优劣，并提供了多实例支持、SSR兼容等进阶优化建议，帮助开发者在灵活性与可维护性之间取得平衡。适用于需要动态控
2025-04-01 16:53:53
765
原创 CSS布局陷阱：max-width与定位属性组合引发的意外折行及解决方案
在CSS布局实践中，开发者常会遇到一个隐蔽的排版问题：当元素同时设置`max-width`与定位属性（absolute/fixed）时，配合`left`偏移和`transform`变换使用，会出现内容未达最大宽度却提前折行的异常现象。其本质原因是定位元素与变形属性的组合导致逻辑可用空间被压缩——浏览器在计算`left`百分比偏移时参考父容器宽度，而`transform`的百分比转换却基于元素自身宽度，形成环形依赖的宽度计算。通过创建分层容器结构，将定位属性与尺寸控制分离（外层容器承载`position/tr
2025-03-24 16:41:14
624
原创 仿Ant Design Vue风格自定义浏览器滚动条样式
本文详细讲解了如何通过CSS自定义浏览器滚动条样式以匹配Ant Design Vue风格。核心步骤包括：使用::-webkit-scrollbar系列伪元素选择器定制滚动条轨道、滑块、箭头按钮样式，重点解决了默认样式不统一的问题。关键代码演示了滚动条宽度、滑块圆角、悬停效果及SVG箭头图标集成，同时指出需关注-webkit前缀兼容性和移动端适配要点，为Ant Design Vue项目提供即用方案。
2025-03-11 13:22:00
650
原创 vue2项目中使用markdown-it插件教程，同时解决代码块和较长单词不换行问题
markdown-it插件可以将流式数据转换为markdown格式，并渲染成html，在页面中展示，# 可能遇到的问题1. markdown-it中渲染代码块时，转换为code标签，导致内部段落不会自动换行，不分段会导致撑开宽度，设置white-space:normal即可2. markdown-it组件中，如果输入较长的单词，不会自动换行，导致宽度撑开；结合::v-deep和*选择器，在markdown-it组件内设置word-break: break-all 和 overflow-wrap: br
2025-03-07 17:03:07
3032
原创 Vuex 跨 Module 方法调用，使用root:true解决
开启命名空间(namespaced: true)对于防止多个模块间可能存在的同名mutation/action造成干扰；使用 { root: true } 让特定上下文中发生的更改能被正确识别并应用至整个应用程序范围内的目标位置；
2025-02-22 17:15:52
553
原创 前端js面试知识点思维导图（脑图）
本文围绕 js 相关面试要点展开，涵盖数据类型、继承、this、作用域、数组、异步编程、内存泄漏、es6、原型、执行上下文等方面，具体涉及各知识点的概念、判断方法、实现原理、应用场景及相关特性等内容。
2024-11-29 16:57:55
1139
原创 解锁 Vue 项目中 TSX 配置与应用简单攻略
本文探讨在 Vue 项目中如何配置 TSX 写法，涉及安装关键插件到 Vite 与 TypeScript 的详细配置步骤。同时，展示了 TSX 在 Vue 中的各种实用语法示例，包括 v-model、v-show、v-if 等常见指令的 TSX 实现方式，以及数组遍历、事件绑定、样式引入和父子组件传参等重要应用场景。
2024-11-27 17:54:17
1407
原创 tsx中使用el-dialog设置visible.sync，解决弹窗右上角叉号失效问题
在 Vue 2 中，.sync 修饰符用于在父子组件之间同步属性值。然而，在 TSX 中并没有类似的 .sync 修饰符。如果要在 TSX 中实现类似的功能，需要手动实现。具体来说，可以通过监听 update:visible 事件来更新 dialogVisible 的值。
2024-11-22 09:37:44
1165
原创 vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页，同时解决预览pdf显示模糊的问题
pdfjs与pdfdist-mergeofd 实现预览pdf并翻页，同时使用css的transform属性解决预览pdf显示模糊的问题
2024-10-28 10:19:04
1442
原创 使用js和canvas、html实现简单的俄罗斯方块小游戏
使用js和canvas、html实现简单的俄罗斯方块小游戏，点击开始游戏后，使用键盘上的←→控制移动，↑控制方块旋转，↓控制方块加速下落，累计一行即可消除并获得分数，触碰到顶部时游戏结束html代码复制即用，可阅读注释
2024-10-24 17:23:40
1729
原创 解决vue使用pdfdist-mergeofd插件时报错polyfills
该插件主要是为了解决pdf-js和ofd-js共同使用时产生的依赖冲突问题，这个错误是由于 pdfjs-dist 库在 Webpack 5 中缺少对 Node.js 核心模块的 polyfill。Webpack 5 不再默认包含这些 polyfill，因此需要手动配置它们。
2024-10-24 16:20:23
642
原创 使用js和canvas实现绘制一只丑萌的小猫，一步步绘制
使用js和canvas实现绘制一只丑萌的小猫，一步步绘制，闲来无事就画了个这个东西，真的怪丑的，大家看个乐子就好，下面的html文件复制即用
2024-10-18 17:25:00
795
原创 前端vue相关常见面试题，包含MVVM、双向绑定原理、性能优化、vue2和vue3性能对比等
前端vue相关常见面试题，包含MVVM、双向绑定原理、性能优化、vue2和vue3性能对比等
2024-09-30 17:15:43
1762
原创 前端项目场景相关的面试题，包含验证码、图片存储、登录鉴权、动态路由、组件划分等项目场景实际的面试题
前端项目场景相关的面试题，包含验证码、图片存储、登录鉴权、动态路由、组件划分等项目场景实际的面试题
2024-09-30 17:13:45
2047
1
原创 vue结合element-ui实现列表拖拽变化位置，点击拖动图标拖动整个列表元素，使用tsx格式编写
vue结合element-ui实现列表拖拽变化位置，点击拖动图标拖动整个列表元素，使用tsx格式编写
2024-09-30 16:40:43
1213
原创 前端算法学习，包含复杂度、双指针、滑动窗口、二叉树、堆等常见题型和方法，含leetcode例题
前端算法学习，包含复杂度、双指针、滑动窗口、二叉树、堆等常见题型和方法，含leetcode例题
2024-09-23 16:33:42
511
原创 前端面试常见手写题,包含手写实现 new instanceof 浅拷贝 深拷贝 call/apply 防抖节流 promise 函数柯里化 快速排序、桶排序、计数排序、promise.all等
前端面试常见手写题,包含手写实现 new instanceof 浅拷贝 深拷贝 call/apply 防抖节流 promise 函数柯里化 快速排序、桶排序、计数排序、promise.all、数组和对象扁平化、async/await等
2024-09-11 20:46:24
722
原创 前端CSS面试常见题
前端CSS面试常见题，包含边界塌陷、bfc、csshack、src和href的区别、浏览器内核、兼容性问题、flex和grid优劣对比
2024-09-11 16:02:30
737
原创 vue2结合element-ui使用tsx格式实现formily自定义组件
使用vue2结合@formily/element，使用tsx文件格式编写，实现自定义formily组件
2024-09-02 15:09:45
1179
原创 vue3配置permission.js和router、pinia实现路由拦截
vue3配置permission.js和router、pinia实现路由拦截
2024-08-01 15:33:13
1608
1
原创 记录使用el-form的resetFields时遇到的表单数据回显失败的问题，去除nextTick解决
记录使用el-form的resetFields时遇到的表单数据回显失败的问题，去除nextTick解决
2024-07-25 21:11:46
980
原创 使用el-table的案例小结——包含跨页多选、双击行、分页器、编辑\删除行、动态根据分页生成序号
使用el-table的案例小结——包含跨页多选、双击行、分页器、编辑\删除行、动态根据分页生成序号
2024-07-24 10:40:57
2112
原创 uniapp微信小程序连接websocket报错1006 abnormal closure
uniapp微信小程序连接websocket报错1006 abnormal closure
2024-06-09 21:20:59
2002
前端js面试知识点思维导图（脑图）
2024-11-29
集成vite、axios、element-plus、echarts、pinia、prettier、eslint的vue3模板
2024-10-12
基于adam优化的对抗数据生成
2024-10-08
使用urlib实现爬虫，获取东方财富网的股票信息
2024-09-29
配置了socket合法域名后还是无法连接，如何解决？（相关搜索：微信小程序）
2024-05-21
TA创建的收藏夹 TA关注的收藏夹
TA关注的人