qq_53720223的博客

原创 在 Three 项目中使用 IndexedDB 缓存 静态资源，使加载速度飞起来-完整版2

【代码】indexedDB本地缓存模型文件2-完整版。

原创 在 Three 项目中使用 IndexedDB 缓存 静态资源，使加载速度飞起来-简易版

【代码】indexedDBb本地缓存模型文件。

原创 前端监控5-可视化展示

原创 前端监控4-用户行为收集

全自动点击捕获：带坐标和选择器。隐私安全的输入监听：数据自动脱敏。SPA 路由支持：History API 完美兼容。性能优化：滚动节流与被动事件监听（Passive Event Listeners）。附：优化小贴士在中使用了，这告诉浏览器该事件监听器不会调用，从而大幅提升页面的滚动流畅度。

原创 vue2中dom元素导出成word文件

样式嵌入 HTML<style>中图片叠加文字可用Canvas 合成表格边框、分页、文字样式需要手动控制使用这种方法，几乎可以实现企业常用表单、报表的导出需求，同时保证 Word 显示尽量和浏览器一致。

原创 为什么创建1x1的gif图片，和png 或者jpg图片有什么区别

尽管在 HTTP/2 时代头部压缩让这点体积差异变得不那么敏感，但1x1 GIF已经成为了业界的标准惯例（Best Practice）。所以，当你看到监控代码里写着时，这不仅仅是一个图片，更是前端工程师对性能极致追求的历史遗留见证。

原创 前端监控1-数据上报

在实际的生产环境中，我们通常不会只使用一种方法，而是采用“组合拳”。

原创 前端监控2-错误信息收集

JavaScript 运行时错误同步运行时错误（同步 throw）Promise 未捕获异常当异步操作抛出错误但未通过catch捕获时，会触发。Vue 全局错误（下一节将详细讲解）Vue 组件中渲染或生命周期钩子中的异常。静态资源加载错误JS、CSS、图片或视频加载失败。控制台报错通过打印的错误，也可能包含重要调试信息。通过以上方法，我们可以在前端项目中：捕获同步和异步 JS 错误捕获未处理的 Promise 异常捕获 Vue 组件错误（下一节将详细讲解）捕获静态资源加载失败。

原创 前端监控3-性能指标收集

指标是否支持强制兼容说明FCP✔浏览器支持 paint首屏亮灯速度LCP✔最大内容渲染CLS✔页面是否抖动FID✔fallback是否可快速交互TTFB✔服务器响应质量同时代码具备：✔ 兼容性好✔ 不影响页面性能✔ 数据信息完整✔ 支持二次扩展（reporter 可替换）

原创 Flex 布局全指南

Flex（弹性布局）是一种用于一维布局（水平或垂直方向）的 CSS 布局方式，它让元素的排列、对齐、分布变得非常灵活。控制子元素在**侧轴（Cross Axis）**方向的对齐方式。控制每个子元素的排列顺序（原本按 HTML 结构）。控制“主轴”（Main Axis）的方向。子元素会在父容器中水平 + 垂直同时居中。允许覆盖 align-items。

原创 在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能

【代码】在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能。

原创 基于 Vue 2 的数据大屏屏幕适配方案实战与最佳实践

前端可视化适配效果图。

原创 将现有vue2前端项目改造成可离线运行的 Demo 版本，不依赖后端接口，支持直接双击本地文件即可打开预览

在不用服务器的，直接双击打开的离线Demo，使用的是本地文件访问协议，浏览器蔚来放置本地文件被恶意网页读取，对这种协议做了非常严格的安全隔离。

原创 使用 Quill 实现编辑器功能

使用到的技术：vue2、Element-ui2.0 、Quill 2.0。

原创 前端监控系统

及时发现问题快速定位问题性能监控：记录页面各阶段加载耗时，以及关键的用户体验指标（如 FP、FCP、LCP、CLS 等）。行为监控：采集 PV、UV、来源渠道、路由跳转等用户行为数据。接口监控：追踪 HTTP 请求的成功率、耗时和异常情况。稳定性监控：捕获并上报各种前端异常（运行时错误、资源加载失败、Promise 未捕获错误等）。数据上报与优化：设计合理的上报机制，保证数据的实时性与性能开销的平衡。数据收集：通过嵌入 SDK，捕获错误和性能数据。数据存储与处理。

原创 uniapp中实现通用tree结构组件库

仓库数据为树形结构，支持多层嵌套。在选择入库或出库时，用户只能从所有节点中选择一个仓库。注意，并非所有的仓库都可被选中--部分仓库被设置为“不可选择”（列如虚拟仓或权限受限的仓库），这些节点应支持配置禁用状态，禁止用户勾选。效果图：黄色框便是可以勾选，灰色框 禁用。

原创 react中state的使用

在 React 中，state是组件内部用来存储和管理数据的核心概念。它允许组件记住信息，并在数据发生变化时重新渲染 UI。State 的使用方式根据你使用的是还是而有所不同。现代 React 开发中，useState是推荐的方式。

原创 处理Three.js物体渲染的锯齿问题

方法适用情况代码示例1. 开启antialias适用于大多数情况，推荐2. 使用FXAA抗锯齿低端显卡适用，减少锯齿FXAAShader3. 增加模型细分度球体、圆环等模型更平滑4. 颜色抗锯齿贴图抗锯齿，减少颜色失真5. 提高适用于高清屏，但影响性能6. 使用适用于大场景深度冲突问题7. 启用阴影抗锯齿适用于光照阴影更平滑可以结合多个方法来优化画质。试试看，看看是否有所改善！到此这篇关于如何解决Three.js物体渲染的锯齿问题的文章就介绍到这了。

原创 React Redux Toolkit 中的全局状态管理使用1-入门版

Provider store={store}> 将store通过store属性传递给 <Provider>,一旦其被渲染，它会将sore注入到React的上下文（Context）中，所有嵌套在其中的组件都可以访问这个store。<Provider> 是一个React Context提供者，他会将Redux store挂载到React的上下文，让所有的子组件都能通过 userSelector 和 useDispatch 访问到store。这是 Redux Toolkit 的核心包，提供了。

原创 vue2给元素添加左右拖动效果

2.拖动过程中去掉自身dom元素的transition动画。3.修改原生css的自定义属性（css变量）1.持久化保存拖后后的宽度。

原创 vue2中在scss基础上给css使用变量

【代码】vue2中在scss基础上给css使用变量。

原创 uniapp正确引入iconfont（阿里图标库）

注意：base64后面的内容是将iconfont.ttf转换得到的。3.修改iconfont.css中的内容为下面的内容（重点）查询的很多相关的的文章，很多都无法正常使用。1.将对应的icon图标下载到本地。

原创 vue2项目中全局修改ElementUI组件某个属性的默认值

我们可以在main.js文件中，给对应的组件设置全局默认属性值。需求，我想给项目中所有用到el-table组件都添加上。1.文字不换行，多余内容的用省略号表示。2.可以手动拖动列表的宽度。

原创 vue3中实现列表滚动效果

在vue3中使用vue-seamless-scroll会存在问题，所以自己去封装滚动列表组件。

原创 vue2实现列表滚动效果

【代码】vue2和vue3实现列表滚动效果。

原创 设置图片和文字中心点在同一水平轴上

【代码】设置图片和文字中心点在同一水平轴上。

原创 css设置滚动条样式

【代码】css设置滚动条样式。

原创 three创建立体字符效果

2.1 加载所需材质。

原创 ThreeJS - 修复摄像机在某些观察角度3D模型部分或者全部不可见的问题

视频效果：从gif中我们可以看到，在不同的角度下3D模型部分或者全部显示。

原创 创建css3D顶牌-01

​​。

原创 vue3中在js文件中引入js、vue、路由等文件

2.引入vue组件获取到dom元素，并传入值。1.引入pinia状态管理js文件。

原创 vue3中alt+鼠标左键点击页面元素跳转到对应的组件位置

2.使用vite搭建的项目。

原创 three中使用Reflector实现阴影反射效果

3.修改Refelctor.js源码文件。

原创 three将世界坐标转为屏幕坐标

【代码】three将世界坐标转为屏幕坐标。

原创 Vue3自定义指令实现ECharts图表响应式布局方案

1.创建指令```})},```

原创 node.js 连接sqlServer并创建接口

用于连接sqlServer数据库。

原创 vue2中文件上传

前端直接将文件上传到独立的文件存储服务（如云存储OSS、AWS S3、七牛云等），存储服务返回文件地址（URL），前端将该地址传给后端，后端仅需将地址存入数据库。

原创 在Vue3中使用NProgress作为顶部进度条

通常在路由文件中：添加。3.2 路由守卫中使用。3.1 配置和初始化。

原创 vue3中使用less修改element-plus的内置样式

1.element-plus的el-select-v2的默认样式。

原创 移动web开发1-流式布局

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站。一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。