y1059477028的博客

原创 react函数组件中，className字符串、style对象如何在父子组件之间传递

原创 在一个scss文件中定义变量，在另一个scss文件中使用

【代码】在一个scss文件中定义变量，在另一个scss文件中使用。

原创 页面宽度适配：如何使页面兼容1080px和1440px宽度

这段代码是一个基于视口宽度的动态像素单位生成方案1440px 下：1 设计像素 = 1 实际像素。1080px 下：1 设计像素 = 0.75 实际像素。其他视口：按比例动态缩放，但限制在合理范围内。完美适配从 1080px 到 1440px 及更大屏幕的响应式需求。

原创 react里的样式穿透

【代码】react里的样式穿透。

原创 vue2中，在table单元格上右键，对行、列的增删操作（模拟wps里的表格交互）

【代码】vue2中，在table单元格上右键，对行、列的增删操作（模拟wps里的表格交互）

原创 前端如何播放二进制音频数据

【代码】前端如何播放二进制音频数据。

原创 react中，使用antd的Upload组件切片上传.zip文件及压缩包的下载

【代码】react中，使用antd的Upload组件切片上传.zip文件及压缩包的下载。

原创 处理react中使用TS或者eslint页面报错问题

在报错代码的上一行加入对应如下代码。

原创 react中，使用antd的Upload组件上传zip压缩包文件

使用antd的Upload上传.zip压缩包文件。

原创 react中，如何使用antd的Row栅格系统使元素左对齐

【代码】react中，如何使用antd的Row栅格系统使元素左对齐。

原创 点击＜el-dropdown＞中某一项跳转页面时，控制台报错的问题

这是组件，点击某一项时跳转至另一个页面，此时控制台就会出现报错。

原创 去除el-tabs 下面的灰色横线，并修改每一项的左右间距，和字体颜色

【代码】去除el-tabs 下面的灰色横线，并修改每一项的左右间距。

原创 Vue3中，子组件通过updata语法糖更新父组件传递过来的值

【代码】Vue3中，子组件通过updata语法糖更新父组件传递过来的值。

原创 如何将一个扁平化的树形数据结构转换为嵌套的树形结构

【代码】如何将一个扁平化的树形数据结构转换为嵌套的树形结构。

原创 定义一个el-tree数据类型

【代码】顶一个el-tree数据类型。

原创 elemenPlus中，如何去掉el-input中 文本域 textarea自带的边框和角标

【代码】elemenPlus中，如何去掉el-input中 文本域 textarea自带的边框和角标。

原创 前端通过sleep方法阻断函数的运行

【代码】前端通过sleep方法阻断函数的运行。

原创 antd组件中，当鼠标移出Modal弹窗后，如何让弹窗消失

【代码】antd组件中，当鼠标移出Modal弹窗后，如何让弹窗消失。

原创 判断一个元素是否在屏幕可视区内，如果不在就滚动到该位置

【代码】判断一个元素是否在屏幕可视区内，如果不在就滚动到该位置。

原创 简单的搜索定位功能

【代码】简单的搜索定位功能。

转载 Git提交代码邮箱报错问题

出现问题的原因是因为Gitlab上的绑定的邮箱和你配置的邮箱不一致，这时候需要检查一下邮箱和用户名。重新git clone一下，当然你如果没有修改代码，那你就直接使用新clone的代码就行了。然后重新提交你会发现，问题没有解决，那是因为你远程的 .git 配置信息还没有更新。如果你已经修改了代码，就新建一个文件夹来放git clone的代码，然后。

原创 react组件中，debounce防抖功能失效

页面上有一个搜索框，searchKey是通过useState定义的响应式数据，onChange事件调用了setSearchKey方法，那么只要输入变化时，组件就会重新渲染从而重新生成新的防抖函数debounceList。最终造成防抖功能失效。

原创 发布-订阅模式演示示例

【代码】发布-订阅模式演示示例。

原创 video视频标签播放视频时点击或拖拽进度条事件

在HTML中，元素，但直接针对鼠标拖拽或点击进度条的事件并不存在。不过，我们可以通过监听元素的 timeupdate事件来间接实现这一需求。

原创 form表单列表中，如何对每一个表单做输入校验

【代码】form表单列表中，如何对每一个表单做输入校验。

原创 Vue响应式之Object变化侦测原理

data通过Observer转换成了getter/setter的形式来追踪变化。当外界通过watcher读取数据时，会触发getter从而将watcher实例（依赖）添加到该数据的专属Dep实例中。当数据发生变化时，会触发该数据的setter，从而向Dep中的依赖发送通知。watcher接收到通知后，会向外界发送通知，变化通知到外界后可能会触发试图更新，也有可能触发用户的某个回调函数（调用Dep中的notify方法，遍历执行所有watcher实例上的update方法。

原创 左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗

【代码】左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗。

原创 el-table如何实现滚动触底加载翻页数据

【代码】el-table如何实现滚动触底加载翻页数据。

原创 el-table序号列（翻页后序号可累加）

【代码】el-table序号列（翻页后序号可累加）

原创 前端下载word、excel文件的两种方法

dataManager/export为导出接口，get请求。备注：url如果直接在浏览器中打开，则直接下载文件；

原创 首屏加载提速优化

一般情况下，用户对速度的感知是非常主观的，所以可通过一些骨架屏、加载动画来拖慢用户对速度的感知。

原创 前端性能优化实用方案总结（二）

场景：当用户向下滚动，将要看到“笔记本|平板” 时，才加载 “笔记本|平板” 数据，如图：实现思路1：利用浏览器原生api实现思路2：利用第三方hooks。

原创 前端部署和资源缓存管理实战

优点：一定期限（max-age）内，不用向服务器询问，资源直接来自浏览器缓存，速度最快；优点：能够保证每次前端打包后丢上服务器后，刷新浏览器一定会更新资源；缺点：只要文件是新放的，即使文件内容没变，也要重新请求服务器资源。缺点：打包时如果不配合hash，无法感知到文件更新。图介：协商缓存对比的是当前浏览器缓存资源的。图介：强缓存对比的是当前浏览器缓存资源的。

原创 前端性能优化实用方案总结（一）

主要跟资源加载时间有关，资源体积越小越好。

原创 Vue3+vite项目资源加载优化：如何模拟prefetch预加载路由页面

Vue3+vite项目中，有一个路由组件体积非常大，当首次（清理浏览器缓存后）跳转至该路由页面时，加载资源需要几秒钟，造成路由跳转耗费时间过长，体验太差。但 Vite 并不支持像Webpack 里特有的魔法注释来直接实现资源的prefetch加载。

原创 阿里图标字体如何使用

方式三：Symbol 引用（几乎不用，可忽略）方式二：font-class 引用。方式一：Unicode 引用。

原创 如何在切换路由时，给路由页面添加过渡动画

可通过插槽结构出当前路由的组件和route信息，再通过transition标签包裹当前路由组件即可。

原创 封装一个dialog组件

【代码】封装一个dialog组件。

原创 vue路由传参之使用query传参页面刷新数据丢失问题解析

在query传参的时候可能会遇到一个问题：当传递参数为对象时，第一次跳转数据是没问题的，但第二次刷新页面数据会变为[object object]要跳转的传参页：先将数组转换为字符串。这样转换一下刷新后数据就不会丢失。

原创 vue自定义指令