- 博客(30)
- 收藏
- 关注
RSS订阅原创 实用的 Google Chrome 命令
chrome://settings - 打开 Chrome 设置页面，可以更改浏览器的各种设置，例如主页、搜索引擎和密码等。chrome://inspect - 打开 Chrome 远程调试页面，可以调试和检查其他设备上的 Chrome 页面。chrome://downloads - 打开 Chrome 下载管理页面，可以查看和管理浏览器的下载记录。chrome://plugins - 打开 Chrome 插件管理页面，可以管理和配置已安装的插件。chrome://newtab - 打开新的空白标签页。
2024-05-11 21:38:09
362
原创 数组对象去重的方法
has方法可以判断Map对象中是否存在指定元素,有则返回true，否则返回false。两两比较，如果后一个对象的id值和前一个对象的id值相等，就把后面的对象删除。set方法可以向Map对象添加新元素 map.set(key, value)定义一个数组存储id的值,然后逐个比较,把id值重复的对象删除即可。values方法可以返回Map对象值的遍历器对象。采用对象访问属性的方法，判断属性值是否存在。
2024-05-10 16:49:43
385
原创 react生命周期及用法
推荐使用新的生命周期方法，如getDerivedStateFromProps()和getSnapshotBeforeUpdate()，同时尽量避免使用旧的生命周期方法，如componentWillMount()和componentWillReceiveProps()。React生命周期是React组件在挂载、更新和卸载过程中的一系列方法的集合。通过生命周期方法，我们可以在不同阶段执行特定的操作，例如初始化组件、更新状态、渲染UI等。React生命周期分为三个阶段：挂载阶段、更新阶段和卸载阶段。
2024-05-10 14:28:44
258
原创 Vue的生命周期
例如，在created阶段可以进行数据的初始化，mounted阶段可以进行DOM操作，beforeDestroy阶段可以进行一些清理操作等等。此时，实例已经完成了数据观测和事件配置，并且可以访问到data和methods等属性。updated：在数据更新完成之后被调用，发生在虚拟DOM重新渲染之后。常用于操作更新后的DOM，或调用第三方库的更新操作。此时，实例的所有指令都已解绑，所有事件监听器都已移除，所有子实例也都被销毁。beforeUpdate：在数据更新之前被调用，发生在虚拟DOM重新渲染之前。
2024-05-10 14:26:46
298
1
原创 react Hooks怎么用
在上面的例子中，我们使用useState定义了一个名为count的状态，并使用useEffect来监听count的变化并更新页面标题。React Hooks是React 16.8版本的一个新特性，它可以让我们在函数组件中使用状态和其他React特性，而不必编写class组件。清理副作用操作：如果副作用操作需要清理，可以在执行副作用操作的函数中返回一个清理函数，并在组件卸载时执行清理操作。来导入React和需要的Hooks函数，比如useState用于管理状态，useEffect用于执行副作用操作。
2024-05-10 14:16:56
403
原创 react hooks 封装倒计时
setTimeout函数中执行代码的时间肯定是要大于等于setTimeout时间的，那么就可能出现设定的 1 秒，实际执行却执行了 2 秒的情况，那么我们的实现思路也很简单，每次计算一下setTimeout实际执行的时间，然后动态的调整下一次执行的时间，而不是设置固定的值。还有需要考虑的是，实际业务中返回的剩余时间肯定不会是整数，所以我们的第一次执行的时间最好可以先让剩余时间变为整数，这样可以在倒计时到最后一秒时更加的精确。
2024-05-08 10:45:22
399
原创 Vue项目中强制刷新页面的方法
如果是刷新某个子组件，则可以通过v-if指令实现。我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的。但是在有缓存的页面，一般就只有第一次会聚焦，后面进入都不会聚焦，办法就是用第四种强制刷新输入框来聚焦。原理很简单，vue使用key标记组件身份，当key改变时就是释放原始组件，重新加载新的组件。子路由触发父路由的方法，如果有多层路由，需要由子路由发出动作再一层一层的传上去，也是使用v-if原理，只是子组件中根据父组件中的值进行强制刷新。
2024-04-15 13:55:01
684
原创 把前端编写的页面转成pdf格式导出
jsPDF 是一个基于 HTML5 的客户端解决方案，用于生成各种用途的 PDF 文档。1.要先写一个导出pdf内容的id，要导出的内容放在这个id标签下。最近需要把一个前端写的页面导出pdf格式留档我使用的是jsPDF。
2024-04-15 09:29:51
205
原创 将多个不同格式文件下载为一个zip包
后端返回文件的数据流，我们转成blob，通过URL对象下的 createObjectURL方法将blob转成可访问的url字符串;后端返回对象数组，每个对象里包含了后缀 .pdf、.jpeg、 .png等文件, 需要将这些格式不同的文件下载为一个zip包。
2024-04-15 09:11:02
298
原创 vue项目配置国际化
页面切换所选语言后，系统会重新加载，获取对应的语言数据，并且下次打开默认之前选择语言。在 src/components/lang/ 中 创建语言js 例如 en-US.js 和 zh-CN.js。en-US.js 和 zh-CN.js 中配置如下，其他字段自己对应添加。在登录的时候可以选择语言，也可以根据浏览器语言默认语言。5.在store/index.js中修改语言的方法。4.在app.vue文件中引入多语言文件。最近我们要把已经做完的系统增加国际化，3.修改main.js中实例化配置。
2024-04-12 14:00:55
663
原创 学习了解Vuex
提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，与data相似，可以通过this.$store.state来直接获取状态，也可以利用vuex提供的mapState辅助函数将state映射到计算属性（computed）中去。其中参数state参数是必须的，也可以自己传递一个参数，如下代码，进行计数器的加减操作，加法操作时可以根据所传递参数大小进行相加，减法操作没有传参每次减一。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2024-04-11 17:07:56
536
1
原创 this.$nextTick作用
DOM更新循环结束之后执⾏延迟回调，在修改数据之后使⽤ $nextTick，则可以在回调中获取更新后的 DOM， 在下次。在 Vue.js 中，数据的改变并不会立即触发 DOM 的更新，而是会放到一个“异步更新队列”中等待处理。但对于一些需要在 DOM 更新后执行的操作，比如获取更新后的元素宽高或操作一些插件等，时则很有用。当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。：当数据更新了，在dom中渲染后，⾃动执⾏该函数。DOM更新循环结束之后执行延迟回调。
2024-04-11 08:58:01
406
1
原创 ./cptable in ./node_modules/xlsx-style/dist/cpexcel.js报错
找到node_modules/xlsx-style/dist/cpexcel.js文件。全局搜索：var cpt = require(‘./cpt’ + ‘able’);修改成：var cpt = cptable;
2024-04-09 13:29:27
1156
1
原创 记录node 版本对应的 node-sass 版本号以及sass-loader
【代码】记录node 版本对应的 node-sass 版本号以及sass-loader。
2024-04-09 13:09:00
11492
原创 JavaScript实现手写签名功能，可触屏手写，支持移动端与PC端
/ 如果不支持保存到相册，你可以提供其他方式或提示用户手动保存。// 将带有白色背景的画布内容转为PNG格式的DataURL。"无法直接保存到相册，请手动保存签名图片。// 复制绘制的签名到带有白色背景的画布。// 将canvas元素插入DOM树中。// 用于保存带有白色背景的签名图像。// 创建一个链接元素并设置下载属性。// 创建两个canvas元素。// 检查是否支持保存到相册。// 上一个触摸点的坐标。// 设置下载文件的名称。// 获取DOM元素。
2024-03-30 13:16:15
1546
2
原创 fabric渲染gif动图
将gif动图解析为一帧一帧的图片，将这些帧图整合成一大张图片，利用fabric.util.requestAnimFrame在每次刷新时，截取一帧图片进行绘制。最近在使用fabric遇到了一个问题，老板让渲染一个gif动图，但是new fabric.Image他只可以渲染gif动图的第一帧，这样就变成了一个静态图，最近也浏览了各大网站找到了一个方法，那就是使用第三方的gifuct-js库。gifuct-js这个库的作用就是将gif解析成帧序列图。
2024-03-13 14:21:39
348
原创 简单的使用Fabric.js
更详细的用法可以参考：https://juejin.cn/post/7026941253845516324#heading-26。// 绑定canvas，传入id。// 绑定canvas，传入id。// 距离容器顶部 100px。// 距离容器左侧 100px。// 距离容器顶部 100px。// 距离容器左侧 100px。// 将矩形添加到画布中。// 宽度 100px。// 高度 100px。// 宽度 100px。// 高度 100px。// 圆的半径 50。// 线段颜色：紫色。
2024-03-13 13:58:06
867
原创 vue刷新页面跳转新页面但又跳转回原页面的问题
load,在js语法里是onload,这里省去on,onload指页面加载完成后执行window.onload()里的js函数,首次加载页面是建立一个onload的监听事件并不执行,针对的是当前页面的下一次加载即刷新去执行onload里的方法,配合destroyed,可解决某一vue单页面刷新跳转另一页面的问题。beforunload是指页面刷新前执行的最后函数所以即使跳转另一页面也会在刷新完成后跳转回原页面,此方法适用与刷新页面前提交表格数据或阻止刷新的操作。：在mounted内创建监听事件。
2024-01-30 10:05:35
868
原创 git一些常用命令
重置当前分支的HEAD为指定commit，同时重置暂存区和工作区，与指定commit一致。选择一个commit，合并进当前分支。新建一个分支，但依然停留在当前分支。添加当前目录的所有文件到暂存区。拉一个项目到本地运行需要的步骤。新建一个分支，并切换到该分支。将本地分支推送到远程分支上去。列出所有本地分支和远程分支。设置提交代码时的用户信息。合并指定分支到当前分支。显示当前分支的版本历史。本地分支与远程分支同步。添加指定文件到暂存区。git add 文件。
2023-11-10 16:30:47
55
1
原创 vue2和vue3在写法上有什么不同？
Vue2底层是通过es5的Object.defineProperty，使用Object.defineProperty()进行数据劫持，结合订阅发布的方式实现，有一定的局限性。vue写法共有组合式和选项式两种写法，vue2主要使用选项式写法，vue3主要使用组合式写法;Vue3底层是通过es6的Porxy， 使用Proxy代理，使用ref或者reactive将数据转化为响应式数据，能够更好地支持动态添加属性和删除属性。缺点：对数组更新的时候无法实现响应式，它内部有一个this.$set去实现。
2023-10-28 16:12:00
460
1
原创 浅拷贝和深拷贝的区别和实现方法
浅拷贝：是拷贝一层，属性为对象时，浅拷贝是复制，两个对象指向同一 个地址。深拷贝：是递归拷贝深层次，属性为对象时，深拷贝是新开栈，两个对象指向不同的地址。（1）结合使用JSON.parse()和JSON.stringify()方法。深拷贝就是在拷贝数据的时候，将数据的所有引用结构都拷贝一份。（2）手写遍历递归赋值；
2022-10-20 16:21:52
446
原创 为什么hooks不能写在循环或者条件判断语句里？
每一个useState都会在当前组件中创建一个hook对象 ，并且这个对象中的next属性始终执行下一个useState的hook对象。正是因为hooks中是这样存储state的 所以我们只能在hooks的根作用域中使用useState，而不能在条件语句和循环中使用。而函数组件就是通过fiber这个数据结构来实现每次render后name address不会被useState重新初始化。因为我们不能每次都保证条件或循环语句都会执行。
2022-10-12 15:07:05
2621
原创 前端js和react面试题及答案
虚拟DOM是真实DOM在内存中的表示，ul的表示形式保存在内存中，并且与实际的DOM同步，这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤，整个过程被称为调和。
2022-10-12 15:03:26
570
原创 react 二维码生成组件
安装组件：npm install qrcode.react --save 引入组件：import QRCode from ‘qrcode.react’;调用下载生成的二维码下载到本地用Antd的Table表格
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人