- 博客(91)
- 收藏
- 关注
RSS订阅原创 前端分页：非当前页进行表单验证
对于大数据量批量导入，渲染到表格的场景中，可能会造成浏览器崩溃，此时前端分页可以很好地解决这个问题，但是组件库自带的表单验证通常只能进行当前页的验证，如何实现对全量数据的表单验证呢？需要借助async-validator库的使用，这里着重讲下，相关代码如下。可以根据校验规则，来进行是否符合校验判断，并返回布尔值。
2024-10-28 17:09:17
434
原创 Blob、File等相关使用详解
当读取操作完成时，它会将文件的内容以二进制数组（ArrayBuffer）的形式返回。这在处理非文本数据时特别有用，比如图像、音频或视频文件，或者当你需要直接访问二进制数据进行更底层的操作时。在JavaScript中，FileReader 对象允许你异步地读取存储在用户计算机上的文件（或Blob和File对象）的内容。它继承了 Blob 的所有属性和方法，并且添加了一些与文件相关的额外属性和功能。options： type：默认值为 “”，表示将会被放入到 blob 中的数组内容的 MIME 类型。
2024-09-26 16:21:42
526
原创 SVG之绘制路径动画
/script>CSS自定义属性（也称为CSS变量）允许你在CSS文档中设置一次值，然后在整个文档中重用这些值。它们以–为前缀，其中是变量名。这些变量可以在CSS的任何地方使用，包括在var()函数中，该函数用于引用自定义属性的值。
2024-07-31 18:05:40
515
原创 SVG使用之path
在这个例子中，它们都是45，意味着椭圆弧是一个圆形弧（如果rx和ry不相等，则是一个椭圆弧）0（第二个）：这个大弧标志（large-arc-flag）用于指示弧是大于还是小于180度。stroke-dasharray：stroke-dasharray属性用于创建虚线效果，通过指定一系列的数字来定义虚线中“实线”和“空白”的长度。0（第三个）：这个扫掠标志（sweep-flag）用于指示弧的绘制方向。0（第一个）：这个参数是旋转角度，表示椭圆弧相对于x轴的旋转角度（以度为单位）。
2024-07-29 17:31:46
613
原创 Excel使用技巧（一）
制作单斜线表头，可以在单元格中添加一个45°的边框线，然后输入项目名称。再把光标放到两个项目名称之间，按Alt+回车，使其强制换行。星号是通配符，就像扑克中的大王，可以表示任意多个字符。除此之外，还有一个小王，就是半角的问号?，他的作用是表示任意一个字符。在“替换为”编辑框中不输入任何内容，直接点全部替换就OK。再输入等号，按方向键的上箭头，最后按Ctrl+回车即可。选中数据区域，然后按住Alt键不放 再按等号即可。已经录入数据的表格，要调整某一列的位置怎么办？按Ctrl+G，定位→空值。
2024-06-14 17:37:16
293
原创 Excel根据身份证号提取信息
“0000-00-00”)：使用 TEXT 函数将提取出来的出生年月日信息按照指定的格式“0000-00-00”进行格式化显示。MID(B2,7,8)：表示从单元格 B2 中的字符串（这里是身份证号），从第 7 个字符开始，提取长度为 8 个字符的子串。公式：=EDATE(D2,IF(F2=“男”,720,IF(F2&C2=“女干部”,660,600)))公式：=IF(MOD(MID(B2,17,1),2)=1,“男”,“女”)公式：=TEXT(MID(B2,7,8),“0000-00-00”)
2024-06-13 18:01:27
13761
原创 Excel自定义排序和求和
举个例子1. 填充自定义排序选项选定目标排序值；文件->选项->自定义排序->导入2 . 应用于所要排序的表格选中要排序的表格数据；数据->自定义排序->排序。
2024-06-12 18:24:40
692
原创 学会前端虚拟滚动，看这篇就够了
前端虚拟滚动是一种用于优化长列表或大量数据展示的技术。它的主要原理是只渲染用户当前可见区域的数据，而不是一次性渲染整个列表或数据集。在传统的列表渲染中，如果数据量很大，渲染所有数据可能会导致性能下降，特别是在滚动时。虚拟滚动通过动态计算可见区域的位置和需要渲染的数据范围，只渲染可见区域内的部分数据，并在滚动时实时更新渲染的内容。总结下就是：先上代码直观体验下index.vuemyVirtualScroller.vue虚拟滚动的思路总结如下：1. 确定视窗位置：通过获取列表滚动区域的scrollTop属性
2024-05-29 17:46:16
2676
原创 浅谈MutationObserver
MutationObserver 是一个强大的 Web API，它允许你监视 DOM 的变化，例如节点的添加、删除、属性的修改等。
2024-05-27 17:51:58
1560
原创 浅谈ResizeObserver
ResizeObserver的应用场景广泛，主要包括以下几个方面：响应式布局：当网页布局需要根据容器大小变化而自适应时，可以使用ResizeObserver来监听容器元素的大小变化，并相应地调整布局和样式。通过这种方式，可以确保元素在尺寸变化时能正确调整其内部样式和内容，为访问者提供更好的用户体验。数据可视化：在使用如ChartJs等图表库创建图表时，可以结合ResizeObserver来实现图表的自适应大小。
2024-05-27 17:36:15
1202
原创 判断dom元素是否滚动到底、是否在可视区域
此篇文章主要是针对特定场景加深对scrollTop、clientHeight、scrollHeight、getBoundingClientRect()等属性的认识，实际场景以上的方案可能并非最佳，比如判断dom元素是否滚动到底，可以使用IntersectionObserver浏览器api.IntersectionObserver监听滚动事件虚拟列表的最佳尝试可以使用requestAnimationFrame浏览器api，requestAnimationFrame用法解析。
2024-05-27 17:10:53
1114
转载 requestAnimationFrame用法解析
这里为了讲解requestAnimationFrame的用法，而举例的处理大数据的方法，但是实际项目中，处理大数据的解决方案还是应用虚拟列表的形式。我的发！被后端五万条数据爆破我是怎么处理的听说你还不会虚拟列表？原谅我来晚了其它参考文章前端开发必备：requestAnimationFrame、setInterval、setTimeout——功能解析与优劣对比。
2024-05-23 18:15:18
492
原创 从0开发、发布油猴脚本（保姆级）
项目中使用conify集成图标，但是有些公司内网用户只能使用离线图标，但是如何判断使用的conify集成图标是在线还是离线呢？这个时候就需要一个油猴脚本，作用于conify官网，对离线图标进行标识。如果单纯自己测试用，那么就不需要在greasyfork平台发布，直接在扩展中添加脚本即可。注： 安装的脚本都可以自主去编辑修改，在原先脚本的基础上，完成一些定制化的功能。提供对于的下载地址即可。点击发布的脚本列表，分享链接，就可以供其他人安装使用了。这个脚本的功能就是将iconify的离线图标进行标识。
2024-05-11 17:25:57
1787
原创 echarts地图绘制
此篇文章为echart进行地图绘制，并有城市与城市之前的路径图，适用于物流方面，以下示例为大致的思路梳理，实际应用场景需要拓展更改
2024-04-29 15:59:09
490
原创 正则表单校验的几种场景
在前端开发中，经常需要进行表单校验，尤其是对于复杂的校验，正则的应用更是个绕不开的话。，下面主要从开头和结尾条件如何限制、匹配符合条件的长度限制、至少包含一个符合条件、校验提示精确到具体的校验 四种场景去展开梳理。
2024-04-28 16:41:59
636
2
原创 前端处理树形数组的几种情况
像日常开发中，经常会有对树形结构的数组的处理，比如数组的扁平化、根据值去查找对应的值等。下面就以省、市、区树形数组为基础数据来举例。
2024-04-24 17:59:07
313
原创 html2pdf,qrcode库及url参数拼接
html2pdf 是一个可以将 HTML 内容转换为 PDF 文件的库。它通常用于前端或服务器端，将网页或 HTML 字符串转换为可打印或可分享的 PDF 格式。这对于需要将网页内容保存为 PDF 或者生成报表等场景非常有用。text参数在qrcode库中不是直接表示页面路径，但你可以将页面路径（URL）作为文本内容传递给toDataURL函数来生成一个指向该页面的二维码。此篇文章主要是对html2pdf,qrcode库及url参数拼接的零散整理。
2024-04-16 15:48:10
558
原创 canvas基础应用
Canvas 的使用场景非常广泛，主要用于实现各种图形、动画、游戏、图像处理和交互效果，接下来主要从水印效果、柱状图、个人签名、球在屏幕上弹跳的效果四种场景来总结。// 使用 toDataURL 方法将 canvas 内容转换为图片数据的 URL。// 获取 img 元素并设置其 src 属性为图片数据的 URL。// 获取 canvas 元素和绘图上下文。// 监听鼠标离开canvas事件。// 该方法只允许调用一次。// 监听鼠标按下事件。// 监听鼠标移动事件。// 监听鼠标松开事件。
2024-03-21 17:41:45
691
原创 vue3+elementPlus项目支持生成、设置默认excel文件
我们项目中的需求经常会有跳转从一个页面跳转到另一个页面的情况，比如a页面跳转到b页面，到b页面之后将a页面的数据带过来，或者回显数据。但是能够把a页面的数据进行加上，然后当作b页面的默认附件吗？saveAs(file, ‘data.xlsx’)为下载excel的功能，下面演示的项目是：vue3+elementPlus。上传附件的组件为el-upload。
2024-03-12 17:12:17
467
原创 文字悬浮下划线动态效果
它可以有以下值之一：linear（匀速）、ease（慢到快再到慢）、ease-in（慢到快）、ease-out（快到慢）、ease-in-out（慢到快再到慢）或cubic-bezier()（自定义速度曲线）。（1）transition-property: 指定应用动画的CSS属性名称。你可以指定一个属性名称，如width、height、background-color等，或者使用all来指定所有可动画的属性。transition属性是一个简写属性，用于在一个给定的持续时间内应用动画效果。
2024-03-06 18:02:03
1022
原创 TypeScript中的keyof、typeof、in
Record工具类型可以将某个类型的属性映射到另一个类型上,其构造的类型属性名的类型为K，属性值的类型为T。TypeScript中的keyof、typeof、in在我们日常工作中经常用到，但也容易遗忘，现详细梳理其用法及使用场景。Partial是一个ts内置工具类型，用于将传入的类型所有属性设置为可选的。在vue项目中，这段代码有编译报错，代码可能看得不清楚，上图片。Readonly工具类型可以将传入的类型中所有属性转化为只读。typeof 可以获取一个对象/实例的类型。
2024-02-20 13:29:32
630
原创 Math.round、parseInt、toFixed使用方法解析
Math.round、parseInt、toFixed在我们日常工作中经常使用，其使用方法容易混淆和遗忘，特别是在ts中的使用和js的使用也有差别，ts对类型的检测更为严格，下面来简单总结下。在js中，Math.round() 函数在接受一个字符串作为参数时，并不会直接报错。它会尝试将字符串转换为数字，然后对转换后的数字进行四舍五入操作，Math相关的其它方法类似。它有两个参数，第一个参数是要转换的字符串，第二个参数是基数（2-36之间的整数），用于指定被解析字符串的进制，默认为十进制。
2024-02-18 18:21:43
715
原创 前端支持下载模板、导入数据、导出数据（excel格式）
xlsx是由SheetJS开发的一个处理excel文件的npm库,适用于前端开发者实现下载模板、导入导出excel文件等需求，演示的项目的技术栈为vue3 + elementPlus。
2024-01-31 16:24:27
698
原创 TypeScript中的类型缩小、类型谓词
要限制函数的返回值类型，可以使用 TypeScript 中的类型别名和类型断言。通过定义一个类型别名，可以指定函数的返回值类型。然后，在函数内部使用类型断言来确保返回值符合预期的类型。在 TypeScript 中，使用类型谓词 is 可以帮助我们限制函数的输入参数类型。但是，这种类型谓词并不能直接限制函数的返回值类型。TypeScript中的类型缩小的方式有typeof、in等方式进行类型缩小。comp也有可能是Itip类型，所以需要用类型断言。对象的类型为 “unknown”。之前有类型谓词的相关介绍。
2023-12-11 17:08:36
532
原创 TypeScript中的函数注释
一般来说，对于基础类型，使用string更为常见和推荐，而对于构造函数或特定的类方法，使用String更合适。然而，如果你需要使用String类的特定功能（例如，处理编码或正则表达式），你需要使用String。如果你只是声明一个包含字符串的变量，使用string更为合适，因为这更符合类型的定义。如果没有定义类型，且无法进行类型推断，且非严格模式，那么隐式注解为any。类型推断是省略类型显示定义的方式，不需要显示定义，也能得到正确的类型。函数注释主要分为显示注释、类型推断、隐式的any，现在来详细总结下。
2023-12-11 16:24:17
768
原创 TypeScript中泛型对象、泛型类、interface和type继承
在 getTodoProp(todo1, ‘id’) 调用中，K 类型被推断为 ‘id’，因此 key 参数的类型为 ‘id’，这个类型也符合泛型类型参数 K 的约束条件。一个类型有没有一种可能让我么在定义的时候传入一个类似于变量的形参，在使用的时候传入具体的类型参数。在class中，所以属性都应该是私有的，如果需要获取属性，设置属性都应该由公共的getter setter方法去完成。本文详细介绍泛型中泛型对象和泛型类的使用，结合实际应用场景，加深对泛型的理解、使用。可以结合例子，去看泛型类的使用。
2023-12-07 15:31:39
948
1
原创 TypeScript中泛型函数
可以在不明确类型的时候，使用泛型占位可以在调用函数是，对函数的参数进行类型的约束类型参数化是泛型的特征：定义时，传入类型参数（泛型）调用时，传入实际类型。
2023-12-06 16:45:27
1195
原创 TypeScript中的undefined,void,null
例如，当检查变量是否被定义或初始化时，通常使用undefined。undefined是一个全局变量，表示未定义或未赋值，可以被覆盖。在函数中，如果您已声明但未返回任何值，则默认返回undefined。null是一个表示无值或空值的JavaScript原始值，与未定义和未赋值的区别。如果要显式设置变量或属性不含任何值，可以将其设置为null。undefined的本质是一个变量定义但是没有赋值，如果let x:undefined = undefined这种方式赋值之后，就不能赋值成其它类型。
2023-12-05 17:00:54
945
原创 TypeScript枚举类型、类型断言
例如上述例子，我们也可以通过Colors[‘SUCCESS’]去获取数据，说明枚举Colors作为一个容器，也存储了数据，并支持访问。上述例子，在赋值的同时，同时也把buttonClor的类型限制为string,因为buttonClor的赋值范围是固定的，所以用枚举可以缩小其赋值范围，更加准确。缺点： 如果有多个属性，需要书写多个属性常量，并且多个属性零散，没有统一维护。缺点：后续对象可能会添加多个属性，所以一种类型可能对应了多个属性，可维护性差。如果直接赋值的话，类型就会改变。
2023-12-05 15:58:19
480
原创 手写new函数
如果return返回了一个函数或者对象等引用类型，那么new函数得到的是myNew的返回值。如果return了一个基础数据类型或者空，那么new函数得到的是一个对象，为obj。
2023-11-12 17:00:24
217
原创 冒泡排序、插入排序、快速排序实现
2. 比较的顺序是将抓的牌依次和手中的牌从右到左比较，如果手中的牌有小于抓的牌，则将抓的牌放在手中对比的牌的后面，退出循环，不再对比。如果对比到第一项，则自己把抓的牌放在手中的牌的最左边。1. 从数组的第一项开始，和相邻的后一项进行对比，如果后一项小于对比项，则两者交换顺序；1.就像打牌一样，先抓第一只牌，放在手里，后面抓的牌都要和手中的牌进行对比；3.递归调用，对比项如果无数据，或者只剩一项，则终止递归，返回自身的值。2. 将数组中比对比项大的放在右边，将数组中比对比项小的放在左边；
2023-07-09 17:05:29
264
原创 内容过长时自动出现tooltip
/ 需要先关闭 Vue 全局警告消息，否则下面的操作会触发 Vue Console Warning。// 如果当前元素内容宽度超过容器宽度，则显示 tooltip。3、使用 tooltip 组件并增加指令 v-overflow-auto-show。2、内容过长时，出现省略号，鼠标 hover 并 tooltip 展示完整内容。// 默认禁止 tooltip。2、自定义 Vue 指令，动态控制 Tooltip 是否展示。-- 内容超过2行时换行 -->1、内容完整展示时，不需要出现 tooltip。
2023-06-29 19:22:16
557
原创 for of、for in 、forEach使用方法对比
for of、for in 、forEach这三种方法在平常工作当中使用较多，但是有的时候可能能实现功能，但是可能并不是最佳实践，现在从遍历的对象类型、遍历顺序、遍历过程中是否可以修改对象、遍历过程中能否使用 break 和 continue、各自适用的场景这几个方面来对比介绍。
2023-04-26 19:30:09
1534
1
原创 Object.entries()方法使用详解
对象的数据处理方法，我们熟知的有很多，比如Object.keys(),Object.values()，for in等，本文将其与其它常见使用方法进行对比，详细解析其特性。
2023-04-24 19:40:13
6163
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人