- 博客(45)
- 收藏
- 关注
RSS订阅
原创 封装一个uniapp的全局弹窗组件，vue中也可以使用，在任何页面都可以弹出
封装一个uniapp的全局弹窗组件，vue中也可以使用，在任何页面都可以弹出
2022-06-17 19:14:07
16602
36
原创 关于2024年1月31号谷歌浏览器更新，css滚动条样式问题的通知
关于2024年1月31号谷歌浏览器更新，css滚动条样式问题的通知版本 121.0.6167.140（正式版本） （64 位）scrollbar-width中的thin属性失效，可能去掉了对该属性的兼容scrollbar-width: thin; 改为 scrollbar-width: none;
2024-02-01 09:26:21
1096
原创 封装通用mixins，在vue中实现a-table组件的可伸缩列（详细且使用便捷）
封装通用mixins，在vue中实现a-table组件的可伸缩列（详细且使用便捷）
2024-01-30 00:10:25
636
1
原创 vue中使用canvas给图片绘制水印，即使下载图片也是带水印的
该组件该有可以补充的地方，比如水印大小，水印颜色等，可以自己动手补充哦。然后去调整几行几列能铺满，调整到铺满整个图片适宜为止，图片的宽高和水印的行数列数，需要你自己调整，你的图片需要显示什么宽高就写多少，
2024-01-25 16:12:51
610
原创 js判断上传的文件是GBK编码还是UTF-8
1、获取文件二进制数据，这里只做示例，例如element-ui中文件上传的beforeUpload方法，返回的file对象，然后使用FileReader对其进行转换，再进行后续判断。2、将二进制数据处理为无符号整数，也就是处理为字节。3、isUTF8函数。
2023-12-08 11:23:38
774
原创 在scroll-view中使用u-charts，滚动图表
直接在scroll-view中使用可滚动的图表，图表是无法滚动的，图表的滚动事件和scroll-view的产生了冲突。
2023-09-07 15:08:33
560
原创 vue中使用vue-draggable教程
Vue-draggable是一个基于Vue.js的可拖拽组件库，可以方便地实现拖拽排序、拖拽交换等功能。
2023-06-13 09:22:11
4212
原创 idea编辑器修改单行注释首缩进几行的快捷键
4. 在 "Comment Code" 区域下方，找到 "Line comment at first column" 选项，并勾选。2. 在弹出的 "Settings" 窗口中，选择 "Editor" -> "Code Style" -> "Java"。1. 打开 IDEA 编辑器，点击菜单栏中的 "File" -> "Settings"。3. 在 "Java" 选项卡下，选择 "Code Generation" 标签页。6. 点击 "Apply" 和 "OK" 按钮保存更改。
2023-05-22 14:31:59
1090
原创 使用vue+element-ui+canvas实现一个画板的功能，可以调节画笔的颜色
这样，我们就完成了一个简单的画板功能，并且可以通过element-ui的颜色选择器来调节画笔的颜色。
2023-05-18 17:13:23
1812
1
原创 uniapp和vue中分别实现微信公众号登录功能
注意，需要在微信公众平台中配置网页授权回调域名，否则获取用户信息的请求将会失败。注意：回调页面的域名需要在微信公众号中进行配置，否则会获取失败。
2023-04-25 15:42:39
846
原创 vue中微信扫码登录的功能
在vue组件中加载微信SDK，并调用微信SDK提供的config接口，将appID、时间戳、随机数和当前url进行签名，并配置JS-SDK。开发者服务器通过临时票据调用微信提供的接口获取用户的openid和access_token，并保存到本地。需要注意的是，需要进行跨域访问的设置，保证vue组件可以正常调用微信SDK和与开发者服务器的交互。用户在扫码界面中扫描二维码后，微信后台将回调开发者服务器的指定url，并携带临时票据。点击扫码登录按钮后，调用微信SDK提供的scanQRCode接口，弹出扫码界面。
2023-04-23 17:32:31
2223
1
原创 react18使用useMemo进行性能优化
useMemo是React中的一个Hook，它接收一个函数和一个依赖项数组，返回一个记忆化的值。在这个例子中，我们有一个计算斐波那契数列的函数，它的计算代价比较高。我们希望在组件中展示这个计算结果，但问题是每次count的值发生变化时都会重新计算斐波那契数列，这会导致性能问题。需要注意的是，useMemo只有在依赖项改变时才会重新计算值，因此需要确保依赖项是正确的。使用useMemo的场景是当计算一个值的代价比较高时，可以使用useMemo来记忆计算结果，避免重复计算导致性能问题。
2023-04-20 18:17:43
308
原创 react中切换导航栏时记录每个页面的页面滚动位置，当切换回之前的页面，页面滚动位置为上次浏览的位置
当用户在页面中滚动时，各个页面的滚动位置会记录在本地存储中。当用户切换页面时，应用会读取本地存储中的滚动位置，并滚动到上次滚动到的位置。在使用 react-router-dom 的路由组件中，使用 useHistory 钩子来监听路由切换事件，以便在切换页面时记录当前页面的滚动位置。在导航栏中添加切换页面的链接，并使用 react-scroll 来处理点击链接时滚动到页面相应位置的功能。切换回之前的页面时，使用 useEffect 钩子和本地存储中保存的滚动位置来还原之前滚动到的位置。
2023-04-12 17:09:53
996
原创 react中使用react-router-dom6的全网最详细教学，抓紧学起来
它提供了许多新的特性和改进，包括改进的导航功能、改进的路由匹配、改进的代码分割和改进的嵌套路由。在React应用程序中使用React Router v6非常简单，只需要定义路由和使用“Link”组件来导航到不同的路由。如果需要使用嵌套路由，可以使用“Routes”组件来定义它们。
2023-04-11 18:22:33
1452
原创 react中使用@reduxjs/toolkit的详细教学，加紧学起来
由于redux-thunk在ts中使用复杂性提高，并且在创建store时过多的繁琐的中间件注册，建议使用@reduxjs/toolkit代替。
2023-04-11 18:05:25
412
原创 vue3中使用pinia报错Uncaught Error: []: getActivePinia was called with no active Pinia. Did，看我代码注释就能解决哈
首先我遇到的情况是在store/index.js中，将pinia抽离开来然后在我的main.ts文件中去挂载现在可以清除的看到我是通过回调的方法先去挂载pinia再去挂载的router，因为router中我使用到了pinia，但是很奇怪的是，竟然报错告诉我使用pinia前要先安装，那可以确定我代码中先使用的pinia后挂载的，那就是这一步有问题了，本人怀疑是异步导致的。
2023-03-29 13:53:38
2763
原创 react18踩坑记录
react-router-dom5中,跳转路由地址刷新页面不刷新问题react-router-dom6中Uncaught Error: useNavigate() may be used only in the context of a component.react-router-dom6嵌套路由正确写法使用antd的table时Each child in a list should have a unique “key” propreact中使用useRoutes注册路由，跳转children
2023-03-09 16:51:53
992
原创 基于vue3+ts+vite封装的动态表单，支持手动编辑生成页面表单配置并渲染使用，所有源码都在文章中
前端动态表单，一个生成器，一个渲染器，主要功能就是生成器会制造出提供表单渲染的数据结构，再传递给渲染器去渲染使用
2023-02-28 15:28:32
3158
原创 封装一个完整版的uniapp图片和视频上传组件，拿来即用，可进行图片视频切换，可自定义上传按钮样式，删除按钮样式，可单独上传图片或者视频，可限制上传数量
封装一个完整版的uniapp图片和视频上传组件，拿来即用，可进行图片视频切换，可自定义上传按钮样式，删除按钮样式，可单独上传图片或者视频，可限制上传数量
2022-06-29 15:54:35
1278
原创 flex: 1的原理是什么
1、flex属性：flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。2、flex-grow属性： 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。.item { flex-grow: <number>; /* default 0 */}如果所有项目的flex-grow属性都为1，则它...
2022-04-27 10:41:36
435
原创 vue中nextTick的原理（一看就懂）
含义可以在DOM更新完毕之后执行一个回调// 修改数据 this.msg = '阿西吧you'// DOM 还没有更新 this.$nextTick(() => { // DOM 更新了，可以拿到更新后的dom元素})场景使用类似scroll-better的库时, 数据更新后必须等dom更新后才能进行进行初始化操作在created钩子函数进行的DOM操作，放在Vue.nextTick()的回调函数中原理利用异步队列...
2022-04-11 21:59:22
685
原创 vue中的全局混入mixin
混入提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。举例// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } .
2022-04-09 22:53:21
2180
原创 ＜router-link＞ 相关属性最标准详解
to表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。<!-- 字符串 --><router-link to="home">Home</router-link><!-- 渲染结果 --><a href="home">Home</a><!-- 使用 v-bind 的 JS 表达式 --><router-
2022-03-27 21:02:40
364
原创 任务队列如何执行，事件循环执行流程，全网最精简易懂解答（保懂）
（这问题保懂吗？我能让你看没用的博客吗）1、同步和异步任务首先要搞清楚哪些是同步任务，哪些是异步任务。同步任务：会竟然有序依次向下执行的，例如console,条件判断语句，循环语句等等。异步任务：分为宏任务和微任务，宏任务会被添加到宏任务队列，微任务添加到微任务队列。（1）宏任务：事件处理函数，定时器，ajax请求，script标签（2）微任务：promise实例的then方法，await关键字2、宏任务队列和微任务队列还要明白任务队列分为宏任务队列和微任
2022-03-05 21:05:00
782
原创 axios基本使用以及拦截器的配置
1、axios函数参数简单介绍首先要明白axios的参数是一个对象，我们依靠设置该对象的属性名来配置请求的具体参数method是请求类型url是请求地址params是用于查询参数传参，get请求传参data是用于请求体参数传参，post请求传参axios({ method:'请求的类型', url:'请求的URL地址', params: {}, // data: {},}).then((result)=>{ ...
2022-02-28 14:33:57
1505
1
原创 Ajax 的实现流程是怎样的？
1、创建 XMLHTTPRequest 对象,也就是创建一个异步调用对象2、创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息3、设置响应 HTTP 请求状态变化的函数4、发送 HTTP 请求5、获取异步调用返回的数据6、使用 JavaScript 和 DOM 实现局部刷新<script type="text/javascript">var HTTPRequest;function checkUsernam.
2022-02-16 21:52:19
1700
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人