- 博客(23)
- 收藏
- 关注
RSS订阅原创 基于vue3和elementPlus的el-tree组件实现懒加载点击节点展开列表
经常会遇到树状结构的页面，刚开始不是一股脑把树状数据全加载出来了，而是基于懒加载 点击节点后调取接口再展开。基于vue3和elementPlus的el-tree组件做个记录~
2023-08-04 19:28:14
2684
1
原创 「Vite」Vite4+vue3工程 结合环境变量，配置proxy代理
基于vite4+vue3搭建的工程，和后端联调时需要先配置proxy，配置代理的过程中遇到一些问题（比如启动报错、接口访问404等等），弯弯曲曲走了很多坑和弯路！这里我直接贴上解决思路和相关代码了，伙伴们有问题可以直接评论或者私信！
2023-08-03 22:01:38
914
原创 「React」之useLayoutEffect
useEffect 和 useLayoutEffect 都是 React 中的 Hook，用于在函数组件中执行副作用操作。它们的主要区别在于触发时间和执行时机。由于 useLayoutEffect 在浏览器绘制之前同步执行，如果它的执行时间过长，可能会阻塞页面渲染，导致用户看到延迟。使用时，优先使用useEffect，出现界面内容闪烁，使用useLayoutEffect。
2023-08-02 22:06:59
402
原创 「React」之组件通信传参
当子组件中的按钮被点击时，会触发 handleClick 函数，该函数调用父组件传递的回调函数 sendData，并将数据作为参数传递给父组件；此时父组件中的 handleChildData 函数会接收到子组件传递的数据，并进行相应处理。在react中，子组件向父组件中传递参数通常通过回调函数的方式实现。然后，在子组件中通过调用父组件传递的回调函数，并传递参数进行数据传递。首先，在父组件中定义一个函数，并将它作为 props 传递给子组件。
2023-08-01 22:30:08
131
1
原创 「React」之useContext
useContext 是 React Hooks 中的一个钩子函数，用于获取 React 中的上下文（Context）的值。它接受一个上下文对象（通过 React.createContext 创建），并返回该上下文的当前值。useContext 的优势在于它使得在多级组件中共享和访问上下文值变得更加便捷。不需要手动传递上下文值给每个子组件，而是可以直接在需要的地方使用 useContext 获取上下文的值。
2023-08-01 18:10:07
1108
1
原创 「React」之useReducer
reducer 函数会根据动作类型更新状态，并触发组件的重新渲染。useState 接受初始状态作为参数，并返回一个状态变量和一个更新状态的函数，而 useReducer 接受一个 reducer 函数和初始状态作为参数，并返回当前状态和一个 dispatch 函数。状态更新逻辑：使用 useState 时，每次调用状态更新函数时，它都会独立地更新状态，不受之前状态的影响。而使用 useReducer 时，根据不同的动作类型，reducer 函数可以定义不同的状态更新逻辑，这使得状态更新更加灵活和可预测。
2023-08-01 15:19:40
640
1
原创 「React」之useEffect
react函数式组件本没有生命周期函数，提供了useEffect副作用函数借以处理类似的功能// 页面第1次加载会触发 console . log('Component mounted') // 页面卸载时触发 return() => {console . log('Component WillUnmount') } } , [ ]) // state每次改变都会触发 useEffect(() => {
2023-07-31 21:26:19
93
原创 「Vite」基于vite配置mock，优化出现大量.mjs/.cjs文件的方案
近期构建一个工程，前端采用了vite构建，配置mock模拟数据时，发现当mock数据发生改变时，就出现了大量的.mjs/.cjs多余文件，还会导致工程运行卡死！3.根目录下新建mock文件夹，下面新建 mockServer.js 和 modules文件夹。2.修改vite.config.js中 关于viteMockServe的配置。然后当修改mock中的文件时就会出现大量的.mjs或者.cjs文件…4. axios中进行配置，然后在对应的.vue组件中调用就可以啦。
2023-07-19 22:47:35
1060
原创 「Vue3」封装el-dialog报警告 — [Vue warn] Set operation on key “visible“ failed: target is readonly.
「Vue3」封装el-dialog报警告 — [Vue warn] Set operation on key "visible" failed: target is readonly. 这里直接贴全部的代码，有需要可以自行取阅
2023-07-13 12:33:23
2383
1
原创 「CSS」每行自适应5个卡片，最后一行卡片布局不乱
之前在用弹性盒子做自适应布局时，发现：如果有7个卡片，第一行放5个，第二行剩余的2个卡片会分散在第二行两端，非常不美观！这里提供了一种实现思路，最后一行不满5个卡片时，让最后一个卡片占满右边空间，效果图如下：
2023-06-17 16:49:37
791
原创 「vue3」之 reactive丢失响应式
发现 使用 reactive 构造响应式对象 时，当 对于其进行重新赋值后，会导致原有变量失去响应式，页面不会发生联动更新；倘若遇到类似情况，个人比较推荐方法2。有更好的方法 ，欢迎评论区留言/私信 ~
2023-06-11 22:25:17
620
原创 数组常用的方法有哪些呢？
平时工作中经常使用到的数组方法有很多，这里做一个总结~ 1. reverse( ) 翻转数组元素2. sort( ) 对数组进行排序，默认按照Unicode编码排序 3. concat( ) 拼接多个数组
2023-02-09 22:22:02
77
1
原创 JavaScript 字符串技巧(反转、分割、替换...)
字符串是几乎所有编程语言中的基本类型之一。总结了常用的使用技巧，那么，我们现在就开始吧。如何反转字符串中的字符，反转字符串中的字符很容易，只需组合扩展运算符 (...)、Array.reverse 方法和 Array.join 方法。有多种方法可以替换所有出现的字符串，您可以使用 String.replace 方法和带有全局标志的正则表达式；或者使用新的 String.replaceAll 方法
2023-02-09 15:45:57
371
原创 js判断回文字符串
回文字符串就是正读和反读都一样的字符串，比如 "noon"、"abcba"怎么验证字符串是回文字符串呢？这里简要提供几种方法供参考：1. 先使用字符串的split方法转化成数组，然后利用数组翻转，最后再转化成新的字符串，两者比对判断
2023-02-09 09:55:22
1084
原创 创建Vue项目
首先保证网速OK，其次node环境正常，npm镜像正常，点击下载一直下一步即可完成安装接下来就可以新建Vue项目了，有多种方法可以选择~
2023-02-08 21:57:27
63
原创 css实现折角效果
一个小demo，使用css实现卡片右上角翻转的效果；使用linear-gradient进行控制去实现。有更好的实现方法可以一起交流~
2023-02-07 16:55:16
299
原创 vue项目兼容老IE
为满足客户需求，对vue项目做兼容IE处理，使用的IE浏览器版本为11.0.9600.19625。在 main.js 中的最前面引入 babel-polyfill。安装babel-polyfill依赖，解决es6语法的兼容问题。在babel.config.js中。
2023-02-07 13:59:07
319
原创 JS实现文件流下载CSV/Excel/Zip文件
JS实现文件流下载CSV/Excel/Zip文件，可在项目中新建utils/downloadFile.js，使用时引入即可；
2023-02-07 11:22:02
517
原创 CSS文字超出显示省略号/文字超过三行显示省略号...鼠标悬浮显示全部
CSS文字超出显示省略号/文字超过三行显示省略号...鼠标悬浮显示全部。
2023-02-06 15:34:30
3075
转载 HTML5新特性总结
WebStorage是HTML新增的本地存储解决方案之一，但并不是取代cookie而指定的标准，cookie作为HTTP协议的一部分用来处理客户端和服务器的通信是不可或缺的，session正式依赖与实现的客户端状态保持。Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，websorage拥有5M的存储容量，而cookie却只有4K，这是完全不能比的。*SVG是基于XML的，意味这可以操作DOM，渲染速度较慢。
2022-07-15 17:16:33
120
原创 session、cookie、token的区别？
今天就来理一理session、cookie、token这三者之间的关系！cookie 有存储大小限制，4KB 左右。浏览器每次请求会携带 cookie 在请求头中。字符编码为 Unicode，不支持直接存储中文。数据可以被轻易查看。属性名称属性含义namecookie 的名称valuecookie 的值commentcookie 的描述信息domain可以访问该 cookie 的域名expirescookie 的过期时间，具体某一时间maxAge。
2022-07-08 13:46:47
12590
10
转载 HTTP 状态码那些事
当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含 HTTP 状态码的信息头（server header）用以响应浏览器的请求。HTTP 状态码的英文为。
2022-07-08 13:42:56
54
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人