- 博客(48)
- 收藏
- 关注
RSS订阅原创 Splitpanes拆分窗格插件使用
项目开发中用到了拆分窗格(就是下面的效果，可以拆分网页，我们项目通常都是用左右两块拆分，可以通过拖动图标进行左右拖动)，于是就发现了一个很好用的插件：Splitpanes。size指定初始化宽度(页面一进来显示的宽度)，总和不要超过100%，值是百分比。可以不指定，默认会平分总宽度。如果感觉组件引入比较麻烦，可以直接进行全局注册。记得一定加default-theme的类名，不然拖动图标会很小。minsize指定最小宽度，取值也是百分比。更多效果可以查看文档，只列举了一些常用的。直接v-for遍历循环即可。
2024-04-10 15:28:36
1375
原创 WebSocket
WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。它通过在单个TCP连接上提供全双工通信功能，使得服务器可以主动向客户端推送数据，而不需要客户端发起请求。
2024-01-12 09:30:51
1264
原创 Monorepo 介绍
Monorepo 是一种项目代码管理方式，指单个仓库中管理多个项目，有助于简化代码共享、版本控制、构建和部署等方面的复杂性，并提供更好的可重用性和协作性。Monorepo 提倡了开放、透明、共享的组织文化，这种方法已经被很多大型公司广泛使用，如 Google、Facebook 和 Microsoft 等。
2023-12-25 15:36:13
362
原创 vue实现div拖拽
在移动端，我们使用@touchstart、@touchend和@touchmove事件监听器来代替桌面端的鼠标事件。在startDrag和drag方法中，我们使用event.touches[0].clientX和event.touches[0].clientY来获取触摸点的位置。对于移动端，需要使用触摸事件来实现拖拽功能。这样，你就可以在Vue 3中实现移动端的div拖拽功能了。最后，在CSS中添加以下样式。
2023-10-24 17:29:40
2502
4
原创 indexDB入门到精通
前言由于开发3D可视化项目经常用到模型，而一个模型通常是几m甚至是几十m的大小对于一般的服务器来讲加载速度真的十分的慢，为了解决这个加载速度的问题，我想到了几个本地存储的。首先是cookie,cookie肯定是不行的，因为最多以只能存4k，其次localStorage，最多能存5m(不是一个key的大小，是所有key的总大小最多加起来最多5m)，相对于cookie已经打了很多了。但是当遇到大模型还是不够，实际开发中大部分模型都是10m-30m的。
2023-08-22 17:15:05
1077
原创 你不知道的Js高级方法
IntersectionObserver 是一个构造函数，可以接收两个参数，第一个参数是一个回调函数，第二个参数是一个对象。这个方法用于观察元素相交情况，它可以异步地监听一个或多个目标元素与其祖先元素或视口之间的交叉状态。特殊场景会用上，比如你登录了淘宝的网页，当你下拉滑块的时候，下面的图片不会立即加载出来，有一个懒加载的效果。是一个用于获取元素位置和尺寸信息的方法。这个方法通常用于需要获取元素在视口中的位置和尺寸信息的场景，比如实现拖拽、定位或响应式布局等，兼容性很好，一般用滚动事件比较多。
2023-08-01 17:13:12
238
原创 chatgpt提问dayjs比较日期范围
用dayjs比较数组格式时间如['01', '02', '03']是否在开始时间['01', '02', '03']和结束时间['05', '00', '00']之间。
2023-07-11 17:52:29
509
原创 css处理浏览器输入框记住账号密码后的背景色
前言： 谷歌浏览器、在记住密码后，通常会给用户密码输入框渲染上一个背景色，在有些时候这个浏览器自动使用的渲染背景色会影响系统本身的UI界面，所以下面提供css方法处理解决。
2023-06-21 09:06:11
480
原创 package.json文件解析
每个项目的根目录下一般都会有一个package.json文件，这个文件定义了当前项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等）。当运行npm install命令的时候，会根据package.json文件中的配置自动下载所需的模块，也就是配置项目所需的运行和开发环境。
2023-06-16 10:07:40
2230
原创 ant-design-vue的a-popover 改变样式的方法
(主要是我不知道你要的是哪个方向的，所以还是去浏览器定位copy)给popover添加overlayClassName属性。然后再style里面就可以正常写样式。如果会影响到你其他页面慎重考虑。
2023-06-15 11:18:18
1437
原创 js中精度超16位解决方法
注意：js中的数值Number没人是int，4个字节，16位，最大只能存16位，超16位后面的数据可能会被转化为0。的过程中，自动识别大整数，把大整数转成一个对象来表示，这样就不会产生精度丢失的问题了。json-bigint是一个第三方包，它在把json。
2023-05-04 10:46:41
814
原创 vue3中suspense的使用
1.作用：suspense在等待异步组件时额外渲染一些内容，使用户拥有更好的体验。使用susoense包裹组件，并配置好default和fallback。引入异步组件，Child需要在components里注册。子组件在等待结果的时候会先渲染fallback里面的内容。这是我子组件里面写的内容，方便查看效果。
2023-04-20 10:48:39
313
原创 瀑布流插件vue-masonry
还有一些属性，感觉不是太重要，因此有兴趣的小伙伴可以自行尝试，问题不大，接着，对比下来不难发现，纯CSS用法还是非常捡漏的，如果真的是实用与项目中，除非是极其简单的应用，可以考虑用纯CSS实现，否则还是建议使用一些功能已经相对完善的第三方插件来帮助我们实现功能~这个属性是动画持续时间，比如，当父级容器的宽度尺寸发生变化了，理所当然的里面的瀑布流布局也会随之发生变化，所有基于瀑布流的DOM将要重新排布，这个排布的过程是动画化的，这个动画持续时间即这里设定的时间~
2023-03-21 17:39:20
972
原创 Vue3的自定义指令
理解这些钩子函数也很简单：我们都知道自定义指令是作用在DOM元素上，那么自定义指令从绑定到DOM元素，再到DOM元素发生变化等等一系列操作，都对应了不同的钩子函数，比如当DOM元素插入到文档中时，自定义指令的mounted等钩子函数就会执行。我们使用自定义指令的目的就是为了灵活的操作DOM以及在钩子函数中处理我们的业务逻辑，所以Vue3将一些我们可能会用到的参数传递给了钩子函数，Vue3和Vue2中的自定义指令传递的参数都很类似。自定义指令也是类似的原理，我们需要先注册自定义指令，然后才可以使用它。
2023-03-16 15:00:13
1509
原创 new Set()的基础用法(ES6)
添加某个值，返回 Set 结构本身，当添加实例中已经存在的元素，set不会进行处理添加。返回键名的遍历器，相等于返回键值遍历器values()Set本身是一个构造函数，用来生成 Set 数据结构。删除某个值，返回一个布尔值，表示删除是否成功。返回一个布尔值，判断该值是否为Set的成员。，没有重复的值，我们一般称为集合。3.3 遍历 entries()3.4 遍历 forEach()3.2 遍历 values()3.1 遍历 keys()清除所有成员，没有返回值。4.2 用于字符串去重。1、什么是Set()
2023-02-07 15:53:31
1746
2
原创 使用VitePress搭建vue组件库文档
每个组件库都有它们自己的文档。所以当我们开发完成我们自己的组件库必须也需要一个组件库文档。，所以下面就以element-plus作为示例来搭建一个文档吧。
2023-02-02 14:56:36
2135
原创 Access-Control-Allow-Origin跨域解决及详细介绍
我们能不能想办法，让我们的请求不通过ajax，而是通过给body中追加一个节点,这个节点的src值就是我们希望的要请求的目标接口，这样，服务器端返回的数据不就绕过这个跨域限制，将数据拿回来了。首先，跨域不是问题。跨域并不会阻止请求的发出，也不会阻止请求的接受，跨域是浏览器为了保护当前页面，你的请求得到了响应，浏览器不会把响应的数据交给页面上的回调，取而代之的是去提示你这是一个跨域数据。而当你上线项目时，如果你的代理配置得不够优雅，或者不够标准，你要小心了，非常有可能你的请求就都会失败。
2023-01-31 11:03:50
42242
3
原创 yarn link 使用方法
可以跨项目，跨文件操作自己想要调试的yarn包，不用每次发布，只要是自己的电脑就可以，因为yarn link 是存在yarn的内存中。相当于开了个通道。原理实质上就是在 在 全局yarn安装目录下设置软连接方式在开发的包里文件下（和packagejson同级） 运行 yarn link然后会出现 success link xxxx（包名） 的标志 此时你的开发包已经在内存中了。
2022-12-12 10:58:09
1970
原创 vue路由切换时报错：api.now is not a function
链接：https://pan.baidu.com/s/1uTyhny7zry0ioYHaSuGmAA?vue-devtools调试工具问题，用了beta版本导致，升级安装正式版即可。
2022-11-21 10:53:54
371
原创 使用scrollTo平滑滚动到顶部
behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto（等同于instant）我一开始考虑使用动画，后来一想如果使用动画，滚动时间就固定了，就会造成滚动忽快忽慢的情况。项目有页面右下角有个返回按钮，点击则滚动到顶部。这里希望平滑滚动到顶部，故而使用smooth参数。所以有没有办法让页面平滑滚动到顶部呢？left 等同于 x-coord。top 等同于 y-coord。
2022-11-03 11:48:04
2598
原创 vueUse插件--useDraggable的使用方法以及案例（vue3）
看到这个工具的时候，我的第一想法是让我的全局设置变成一个可自由摆放，自由拖拽的小组件。同样，你还可以去实现弹出框，对话框的自由拖拽等等。自由发挥想象，反正有了这个工具你少写很多代码，而且减少bug风险，毕竟是vue官方工具。好了，废话不多说，下面上例子。其中-40的部分是减掉元素本身的大小。这里只是一个简单的demo，没有去处理窗口大小变化的时候，所以感兴趣的小伙伴可以自行往下扩展。官方给出的demo，感兴趣的可以去VueUse官网看看。参数是一个对象，里面有初始值，拖拽方式，感兴趣的可以去看看源码。
2022-10-21 10:43:41
4427
3
原创 Object.assign是浅拷贝还是深拷贝？
Object.assign()拷贝的是属性值，如果源对象的属性值是一个指向对象的指针，那也只拷贝那个指针。所以如果对象的属性值为基础类型，对于通过Object.assign()拷贝的那个属性而言是深拷贝；如果对象的属性值为引用，对于通过通过Object.assign()拷贝的那个属性而言其实是浅拷贝的。神奇的事情发生了，target.a.b的值随着source变化而变化，但是target.c的值并没有随着source变化。target的值并没有随着source的变化而变化，到这里有人会说，这一看就是。
2022-10-12 11:15:32
4055
原创 vue3:setup语法糖
直接在script标签中添加setup属性就可以直接使用setup语法糖了。使用setup语法糖后，不用写setup函数；组件只需要引入不需要注册；属性和方法也不需要再返回，可以直接在template模板中使用。//此时注册的变量或方法可以直接在template中使用而不需要导出}
2022-10-12 10:06:44
400
转载 Canvas 从入门到劝朋友放弃（图解版）
本文主要讲解了在Canvas中绘制一些基础图形，还有一些基础样式设置。还有更多高级的玩法会在之后的文章中讲到，比如渐变、投影、滤镜等等。Web开发分享Web后端开发技术，分享PHP、Ruby、Python等用于后端网站、后台系统等后端开发技术；还包含ThinkPHP,WordPress等PHP网站开发框架、Django,Flask等Python网站开发框架。...
2022-08-30 10:31:22
197
原创 Pinia 和 Vuex 对比
Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。本文将通过Vue3的形式对两者的不同实现方式进行对比，让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余。既然我们要对比两者的实现方式，那么我们肯定要先在我们的Vue3项目中引入这两个状态管理器（实际项目中千万不要即用Vuex又用Pinia，不然你会被同事请去喝茶的。下面就让我们看下它们的使用方式吧。...
2022-08-29 16:15:59
384
原创 认识pinia
我们这里可以直接结构出想要的数据，但是数据会出现无法实现响应式问题，官方使用的API reactive 使state数据生成响应式。对于这种情况我们可以这样做。对比与vuex，pinia中的getters只是在幕后做计算,不能传递任何参数，但是可以使用getter返回一个函数接受任何参数。在这里我们获取state里数据是不需要传入直接使用this,actions 方法可以互相调用直接使用this。这里需要传入state才能拿到数据，可以直接使用state和this效果是一样的。下面引用的官方的例子。....
2022-08-18 10:07:32
83
原创 TypeScript 入门
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。简而言之，TypeScript是JavaScript的超集，具有可选的类型并可以编译为纯JavaScript。从技术上讲TypeScript就是具有静态类型的 JavaScript。......
2022-08-16 17:47:49
852
原创 优秀的JavaScript 方法
在使用需要一定程度随机化的算法时，您通常会发现shuffle array是一项非常必要的技能。下面的代码片段以 O(n log n) 的复杂度对数组进行混洗。在 Web 应用程序中，复制到剪贴板因其对用户的便利性而迅速普及。注意：根据 caniuse，该方法适用于 93.08% 的全球用户，所以检查用户的浏览器是否支持 API 是必要的。要支持所有用户，您可以使用输入并复制其内容。每种语言都有自己的 Hash List 实现，在 JavaScript 中称为 Set。...
2022-08-16 15:39:42
186
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人