念念不忘必有回响-CSDN博客

原创 html2pdf,qrcode库及url参数拼接

html2pdf 是一个可以将 HTML 内容转换为 PDF 文件的库。它通常用于前端或服务器端，将网页或 HTML 字符串转换为可打印或可分享的 PDF 格式。这对于需要将网页内容保存为 PDF 或者生成报表等场景非常有用。text参数在qrcode库中不是直接表示页面路径，但你可以将页面路径（URL）作为文本内容传递给toDataURL函数来生成一个指向该页面的二维码。此篇文章主要是对html2pdf,qrcode库及url参数拼接的零散整理。

2024-04-16 15:48:10 181

原创 canvas基础应用

Canvas 的使用场景非常广泛，主要用于实现各种图形、动画、游戏、图像处理和交互效果，接下来主要从水印效果、柱状图、个人签名、球在屏幕上弹跳的效果四种场景来总结。// 使用 toDataURL 方法将 canvas 内容转换为图片数据的 URL。// 获取 img 元素并设置其 src 属性为图片数据的 URL。// 获取 canvas 元素和绘图上下文。// 监听鼠标离开canvas事件。// 该方法只允许调用一次。// 监听鼠标按下事件。// 监听鼠标移动事件。// 监听鼠标松开事件。

2024-03-21 17:41:45 608

原创 vue3+elementPlus项目支持生成、设置默认excel文件

我们项目中的需求经常会有跳转从一个页面跳转到另一个页面的情况，比如a页面跳转到b页面，到b页面之后将a页面的数据带过来，或者回显数据。但是能够把a页面的数据进行加上，然后当作b页面的默认附件吗？saveAs(file, ‘data.xlsx’)为下载excel的功能，下面演示的项目是：vue3+elementPlus。上传附件的组件为el-upload。

2024-03-12 17:12:17 360

原创文字悬浮下划线动态效果

它可以有以下值之一：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 849

原创 TypeScript中的keyof、typeof、in

Record工具类型可以将某个类型的属性映射到另一个类型上,其构造的类型属性名的类型为K，属性值的类型为T。TypeScript中的keyof、typeof、in在我们日常工作中经常用到，但也容易遗忘，现详细梳理其用法及使用场景。Partial是一个ts内置工具类型，用于将传入的类型所有属性设置为可选的。在vue项目中，这段代码有编译报错，代码可能看得不清楚，上图片。Readonly工具类型可以将传入的类型中所有属性转化为只读。typeof 可以获取一个对象/实例的类型。

2024-02-20 13:29:32 246

原创 Math.round、parseInt、toFixed使用方法解析

Math.round、parseInt、toFixed在我们日常工作中经常使用，其使用方法容易混淆和遗忘，特别是在ts中的使用和js的使用也有差别，ts对类型的检测更为严格，下面来简单总结下。在js中，Math.round() 函数在接受一个字符串作为参数时，并不会直接报错。它会尝试将字符串转换为数字，然后对转换后的数字进行四舍五入操作，Math相关的其它方法类似。它有两个参数，第一个参数是要转换的字符串，第二个参数是基数（2-36之间的整数），用于指定被解析字符串的进制，默认为十进制。

2024-02-18 18:21:43 331

原创前端支持下载模板、导入数据、导出数据（excel格式）

xlsx是由SheetJS开发的一个处理excel文件的npm库,适用于前端开发者实现下载模板、导入导出excel文件等需求，演示的项目的技术栈为vue3 + elementPlus。

2024-01-31 16:24:27 425

原创 TypeScript中的类型缩小、类型谓词

要限制函数的返回值类型，可以使用 TypeScript 中的类型别名和类型断言。通过定义一个类型别名，可以指定函数的返回值类型。然后，在函数内部使用类型断言来确保返回值符合预期的类型。在 TypeScript 中，使用类型谓词 is 可以帮助我们限制函数的输入参数类型。但是，这种类型谓词并不能直接限制函数的返回值类型。TypeScript中的类型缩小的方式有typeof、in等方式进行类型缩小。comp也有可能是Itip类型，所以需要用类型断言。对象的类型为 “unknown”。之前有类型谓词的相关介绍。

2023-12-11 17:08:36 472

原创 TypeScript中的函数注释

一般来说，对于基础类型，使用string更为常见和推荐，而对于构造函数或特定的类方法，使用String更合适。然而，如果你需要使用String类的特定功能（例如，处理编码或正则表达式），你需要使用String。如果你只是声明一个包含字符串的变量，使用string更为合适，因为这更符合类型的定义。如果没有定义类型，且无法进行类型推断，且非严格模式，那么隐式注解为any。类型推断是省略类型显示定义的方式，不需要显示定义，也能得到正确的类型。函数注释主要分为显示注释、类型推断、隐式的any，现在来详细总结下。

2023-12-11 16:24:17 490

原创 TypeScript中泛型对象、泛型类

在 getTodoProp(todo1, ‘id’) 调用中，K 类型被推断为 ‘id’，因此 key 参数的类型为 ‘id’，这个类型也符合泛型类型参数 K 的约束条件。一个类型有没有一种可能让我么在定义的时候传入一个类似于变量的形参，在使用的时候传入具体的类型参数。在class中，所以属性都应该是私有的，如果需要获取属性，设置属性都应该由公共的getter setter方法去完成。本文详细介绍泛型中泛型对象和泛型类的使用，结合实际应用场景，加深对泛型的理解、使用。可以结合例子，去看泛型类的使用。

2023-12-07 15:31:39 516

原创 TypeScript中泛型函数

可以在不明确类型的时候，使用泛型占位可以在调用函数是，对函数的参数进行类型的约束类型参数化是泛型的特征：定义时，传入类型参数（泛型）调用时，传入实际类型。

2023-12-06 16:45:27 950

原创 TypeScript中的undefined,void,null

例如，当检查变量是否被定义或初始化时，通常使用undefined。undefined是一个全局变量，表示未定义或未赋值，可以被覆盖。在函数中，如果您已声明但未返回任何值，则默认返回undefined。null是一个表示无值或空值的JavaScript原始值，与未定义和未赋值的区别。如果要显式设置变量或属性不含任何值，可以将其设置为null。undefined的本质是一个变量定义但是没有赋值，如果let x:undefined = undefined这种方式赋值之后，就不能赋值成其它类型。

2023-12-05 17:00:54 661

原创 TypeScript枚举类型、类型断言

例如上述例子，我们也可以通过Colors[‘SUCCESS’]去获取数据，说明枚举Colors作为一个容器，也存储了数据，并支持访问。上述例子，在赋值的同时，同时也把buttonClor的类型限制为string,因为buttonClor的赋值范围是固定的，所以用枚举可以缩小其赋值范围，更加准确。缺点：如果有多个属性，需要书写多个属性常量，并且多个属性零散，没有统一维护。缺点：后续对象可能会添加多个属性，所以一种类型可能对应了多个属性，可维护性差。如果直接赋值的话，类型就会改变。

2023-12-05 15:58:19 389

原创手写new函数

如果return返回了一个函数或者对象等引用类型，那么new函数得到的是myNew的返回值。如果return了一个基础数据类型或者空，那么new函数得到的是一个对象，为obj。

2023-11-12 17:00:24 148

原创冒泡排序、插入排序、快速排序实现

2. 比较的顺序是将抓的牌依次和手中的牌从右到左比较，如果手中的牌有小于抓的牌，则将抓的牌放在手中对比的牌的后面，退出循环，不再对比。如果对比到第一项，则自己把抓的牌放在手中的牌的最左边。1. 从数组的第一项开始，和相邻的后一项进行对比，如果后一项小于对比项，则两者交换顺序；1.就像打牌一样，先抓第一只牌，放在手里，后面抓的牌都要和手中的牌进行对比；3.递归调用，对比项如果无数据，或者只剩一项，则终止递归，返回自身的值。2. 将数组中比对比项大的放在右边，将数组中比对比项小的放在左边；

2023-07-09 17:05:29 246

原创内容过长时自动出现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 362