笔记
文章平均质量分 75
时清云
自强不息,厚德载物;日拱一卒,功不唐捐;海纳百川,有容乃大。这世上没有最强的人,只有想变强的人,做一个简单真实的自己。
展开
-
什么,你连一个Node.js脚本都不会写!!!
最后,除了fs-extra给大家分享一些常用的第三方 Node.js 包,大家可以去实践一下,写各种各样的用于前端工程中自动化操作的 Node.js 脚本。yargs: 用于解析命令行参数。它提供了简单易用的 API,可以帮助您定义和解析命令行参数,支持选项、标志和参数的定义和解析。chalk:用于给命令行输出添加颜色,可以让输出更具有可读性和吸引力。cli-table:用于在命令行中创建漂亮的表格,方便展示数据。ora:用于在命令行中显示加载动画,可以提示用户正在进行某些操作。inquirer。原创 2024-06-04 09:39:39 · 887 阅读 · 0 评论 -
如何使用 JavaScript 阻止屏幕进入睡眠状态
在移动设备上,屏幕常亮是一个常见的需求,尤其是在使用Web应用时。为了满足这一需求,开发者可以使用JavaScript中的来阻止屏幕进入睡眠状态。本文将详细介绍如何使用这一API,并讨论其在不同浏览器上的兼容性情况。转载 2024-03-29 15:41:59 · 354 阅读 · 0 评论 -
终于等到你!JS全新API支持关闭页面时安全发送网络请求
在日常的开发中,经常需要在用户关闭页面或导航至其他页面时,向服务器发送重要的数据请求。然而,确保这些数据请求能够安全、完整地发送到后端一直是一个挑战。近日,Chrome 浏览器正在积极引入一个革命性的 JavaScript API——。这个全新的 API 旨在彻底简化关闭页面时的数据发送过程,确保即使在页面关闭后或用户离开的情况下,请求也能在未来某个时刻被安全、可靠地发出。本文就来详细了解这个超实用的全新 API。转载 2024-03-29 15:13:01 · 178 阅读 · 0 评论 -
Chrome 123 推出了一个新的 CSS 属性 field-sizing
最近Chrome 123又推出了一个新的 CSS 属性:。有了它,可以轻松实现输入框尺寸自动跟随输入内容的效果。转载 2024-03-27 14:40:50 · 57 阅读 · 0 评论 -
数组中的flat方法如何实现
数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。那flat怎么来实现呢?原创 2024-03-18 22:38:30 · 498 阅读 · 0 评论 -
vant4中如何修改Dialog弹框内容的字体大小
最近在开发一个移动端的需求,用的UI组件库是vant4。简单地总结一下,如何修改Dialog弹框内容的字体大小。这样 message 内容中的字体大小就是16px了。那么如何修改message中的字体大小呢?我们先看一下Dialog弹框简单的使用。原创 2024-03-14 14:57:32 · 1130 阅读 · 2 评论 -
安装 node-sass 失败原因及解决办法汇总
首先要知道的是,安装 node-sass 时在 node scripts/install.js 这个阶段会从 github.com 上下载一个 .node 文件,大部分安装不成功的原因都源自这里,因为 GitHub Releases 里的文件都托管在 s3.amazonaws.com 上面,而这个网址在国内总是"网络不稳定",所以我们需要通过第三方服务器下载这个文件。因为Node 8 不能装 node-sass 3.x 这是肯定的(Node 7才对应 3.x),所以得装 node-sass 4.x。转载 2024-03-03 20:55:42 · 6673 阅读 · 3 评论 -
使用pdf.js预览pdf遇到的问题总结
大于1M的pdf资源请求会很慢,所以在第二次请求、第三次请求等这些结果返回之后,第一次请求的结果还没有返回回来,(第二次请求、第三次请求等请求响应的结果是权限错误,因为iobs链接已经用了不止一次),因为第二次请求、第三次请求等请求失败,所以第一次请求的响应结果也是请求报错(因为服务器认为)但是苹果手机不是这样的,没有设置强缓存(苹果系统的安全机制是这样的,可以手动设置),所以分片加载会请求多次,第一次请求正常,后面的请求会出现请求报错的情况。好,现在已经修改完,大于1M的数据也可以被成功预览。原创 2024-03-03 17:09:57 · 2420 阅读 · 0 评论 -
【JavaScript 教程】第六章 数组06— slice() :复制数组元素
start和stop参数都是可选的。start 参数确定从零开始提取的索引。如果start是undefined, slice() 从 0 开始。stop参数,顾名思义,是一个从零开始的索引,在该索引处结束提取。slice() 方法提取到 stop-1。这意味着 slice() 方法不包含新数组中停止位置的元素。如果省略 stop 参数,slice() 方法将使用数组的长度作为 stop 参数。slice() 返回一个包含原始数组元素的新数组。转载 2024-02-19 17:37:50 · 97 阅读 · 1 评论 -
【JavaScript 教程】第六章 数组10— sort() : 对数组中的元素进行排序
sort() 方法允许您就地对数组的元素进行排序。除了返回排序后的数组,sort() 方法还改变了元素在原始数组中的位置。(会改变原有的数组)默认情况下, sort() 方法按升序对数组元素进行排序,最小值在前,最大值在后。sort() 方法将元素转换为字符串并比较字符串以确定顺序。在此示例中,sort() 方法将 10 放在 2 之前,因为在进行字符串比较时,字符串“10”在“2”之前。要解决此问题,您需要将比较函数传递给 sort() 方法。转载 2024-02-18 14:48:05 · 99 阅读 · 0 评论 -
【JavaScript 教程】第六章 数组11— filter() :过滤数组中的元素
使用数组时最常见的任务之一是创建一个包含原始数组元素子集的新数组。假设您有一个城市对象数组,其中每个对象包含两个属性:name和population。i++) {JavaScript Array 提供了 filter() 方法,允许您以更短、更简洁的方式完成此任务。});结果如下:在本例中,我们调用了城市数组对象的 filter() 方法,并将其传递给一个测试每个元素的函数。在函数内部,我们检查了数组中每个城市的人口是否大于 300 万。如果是这种情况,则函数返回true;转载 2024-02-06 17:36:14 · 107 阅读 · 0 评论 -
【JavaScript 教程】第六章 数组17—flatMap() :对每个元素执行映射函数并将结果展平
flat() 方法创建一个新数组,其中连接了子数组的元素。map() 方法创建一个新数组,其元素是映射函数的结果。flatMap() 方法是 map() 方法后跟深度为 1 的 flat() 方法的组合。flatMap() 方法首先使用映射函数映射数组中的每个元素,然后将结果展平到一个新数组中。转载 2023-12-19 17:06:58 · 330 阅读 · 0 评论 -
【JavaScript 教程】第六章 数组14—reduce() :将数组的元素减少为一个值
并且我们想要计算数组元素的总数。i++) {6首先,声明了一个包含三个数字 1、2 和 3 的数组。其次,声明 sum 变量并将其值设置为零。第三,在 for 循环中,将 numbers 数组的元素加到 sum 变量中。循环之后,sum变量的值为6。我们所做的是将一个数组归约为一个值。Array.prototype 允许我们使用reduce});这很简单,不是吗?让我们详细看一下reduce()方法。转载 2024-02-06 16:59:45 · 65 阅读 · 0 评论 -
elementPlus实现动态表格单元格合并span-method方法总结
最近在做PC端需求的时候,需要把首列中相邻的同名称单元格合并。我看了一下elementPlus官网中的table表格,span-method可以实现单元格合并。我们先看一下官网的例子:多行或多列共用一个数据时,可以合并行或列。通过给 table 传入span-method方法可以实现合并行或列, 方法的参数是一个对象,里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。 该函数可以返回一个包含两个元素的数组,第一个元素代表 rowspan,原创 2024-02-06 10:55:21 · 4127 阅读 · 0 评论 -
Vue + Element 前端调用后端接口获取微信支付二维码和支付宝支付二维码
2、在需要使用该插件的 Vue 文件中引入3、接下来编写代码实现,在表格点击“支付”按钮,跳出支付弹窗,有微信支付和支付宝支付的两种方式按钮选择,当点击某个方式会跳出相应的二维码,并设置定时器去查询支付状态是否支付成功。更多内容看代码里的注释(这里给出这部分的相关代码,无关内容的代码没有给出)HTML 部分(支付宝二维码生成直接用 iframe 标签):JavaScript 部分:CSS 部分:参考:https://www.cnblogs.com/wangyan0926/p/14473859.转载 2024-01-18 11:22:51 · 585 阅读 · 0 评论 -
在ios上z-index不起作用问题的总结
最近在维护一个H5老项目时,遇到一个问题,就是在ios上z-index不起作用,在安卓上样式都是好的。项目的架构组成是vue2.x + vux + vuex + vue-router等用的UI组件库是vux在页面中有一个功能点,就是点选择公司列表的时候,会出现这个页面上面浮现一个a弹框页面,这个a弹框页面里面有搜索框,可以输入公司名进行搜索,然后出现公司列表,点击其中的一个公司,就算进行选择了。主要是基于vux这个UI组件库的特性造成了这个问题;基础代码如下:原创 2024-01-11 18:01:45 · 1467 阅读 · 0 评论 -
前端是怎么解析Excel、PDF、Word、PPT等文件的?
这是今年的第24篇文章,也是今年的最后一篇文章,完结撒花🎇!!!进入我的个人网站,查看更多精彩❤!转载 2024-01-08 17:19:33 · 648 阅读 · 1 评论 -
详解前端二进制:Blob、File、FileReader、ArrayBuffer、TypeArray、DataView
当前,前端对二进制数据有许多的API可以使用,这丰富了前端对文件数据的处理能力,有了这些能力,就能够对图片等文件的数据进行各种处理。本文将着重介绍一些前端二进制数据处理相关的API知识,如Blob、File、FileReader、ArrayBuffer、TypeArray、DataView等等。转载 2023-12-06 18:31:26 · 602 阅读 · 0 评论 -
vue3中effectScope()、getCurrentScope()、onScopeDispose()简介
创建一个 effect 作用域,可以捕获其中所创建的响应式副作用 (即计算属性和侦听器),这样捕获到的副作用可以一起处理。说明:这是一个回调事件。当执行getCurrentScope().stop()时,或者组件注销时触发。通俗的说,它可以把计算属性、监听器放在一个函数内管理,然后统一停止监听。比如一个页面中存在多个管家,而我们不想一个个取消每个管家的监听,可以通过此方式。allScope.stop() // 取消所有侦听管家监听。说明:获取当前侦听管家实例。转载 2023-12-04 18:31:39 · 796 阅读 · 0 评论 -
请求pdf文件流并进行预览
最近做了一个需求就是预览pdf等文件,不过后端返回的是一个文件流,需要前端做一定地处理才行。我们来看一下具体的实现方式。原创 2023-11-24 18:36:31 · 1457 阅读 · 0 评论 -
使用pdf.js插件预览pdf文件时怎么去掉pdf文件的浏览记录
然后把这一行代码注释掉就可以了,就实现了清除缓存或者浏览记录的目的。最近在开发pdf文件预览相关的需求,我用的插件是pdf.js。每次预览一个pdf文件时,原创 2023-11-23 16:58:21 · 484 阅读 · 0 评论 -
pdf.js插件怎么控制工具栏的显示与隐藏
最近做了一个需求,需要实现pdf文件的预览,但是只是提供预览功能,不需要展示相关的工具栏,所以需要把工具栏隐藏掉。我用的插件是pdf.js。原创 2023-11-23 16:41:10 · 2105 阅读 · 0 评论 -
CSDN自动生成文章目录
看到这个“文章目录后”,我高兴了,这玩意还挺好的,看着目标大纲就清晰文章要讲得啥了。而且更绝的是这个还有一个定位功能,点击到文章目录的那个目录就会自动定位到所写内容的目录前面。这么方便,必须要整一个。转载 2023-11-23 16:04:21 · 90 阅读 · 0 评论 -
动态加载js文件的方法封装
总结一下,动态加载js文件的方法封装。原创 2023-11-18 16:53:14 · 106 阅读 · 0 评论 -
如何使用JavaScript实现纯前端读取和导出excel文件
由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持xls、xlsx、ods(一种OpenOffice专有表格文件格式)等十几种格式。本文全部都是以xlsx格式为例。普通版本不支持定义字体、颜色、背景色等,有这个功能需要的可以使用pro版,好像是要收费的,因为官网没看到下载地址。转载 2023-11-18 16:51:15 · 5529 阅读 · 0 评论 -
vue3.0中实现excel文件的预览
数组类型表示一个 8 位无符号整型数组,创建时内容被初始化为 0。创建完后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素。是由SheetJS出品的js-xlsx是一款非常方便的只需要纯JS即可读取和导出excel的工具库,功能强大,支持格式众多,支持。每种格式的文件想要实现预览的效果需要使用对应的插件,如果要实现。静态方法返回由指定的 UTF-16 码元序列创建的字符串。最近开发了一个需求,要求实现预览图片、pdf、格式文件的预览,要用到哪种插件呢?、word、txt等格式的文件;原创 2023-11-17 16:24:31 · 2189 阅读 · 2 评论 -
解决vue3中设置的v-html的代码样式不生效的问题
在单文件组件里,scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被Vue 的模板编译器处理。如果你希望针对v-html 的内容设置带作用域的 CSS,你可以替换为 CSS Modules 或用一个额外的全局。最近在做一个需求,遇到这样一个问题,接口返回的一段。这句话非常清楚地表明了没有生效的原因。内容的样式没有生效,这是什么情况?那我们怎么设置让它生效呢?渲染到页面的时候,发现在。原创 2023-11-17 10:48:25 · 2582 阅读 · 0 评论 -
vue3.x中父组件添加自定义参数后,如何获取子组件$emit传递过来的参数
之前写过一篇文章,现在已经进入vue3.x开发的时代了,那么vue3.x中父组件添加自定义参数后,如何获取子组件$emit传递过来的参数?原创 2023-11-16 16:24:36 · 697 阅读 · 0 评论 -
element-plus中图片预览插件源码改动
虽然效果展示出来了,但是有些方面还是不能满足我们的需求,比如,预览图在一个固定的区域内,但是因为有鼠标滚轮事件,可以滚动的时候实现预览图的放大缩小,所以导致在左边的列表区域上下滚动的时候,预览图也跟着放大和缩小。但是我们项目的需求是点击按钮进入一个预览页面,直接展示预览图片,并且左边有文件名列表,点击列表中的文件名,展示这个文件名下上传的所有图片,然后进行轮播预览,同时在大图预览下面有对应的缩略图轮播,大图预览轮播和缩略图轮播形成联动效果,大图轮播,下面缩略图也跟着轮播。好了,改完源码,满足需求了。原创 2023-11-16 14:05:36 · 984 阅读 · 0 评论 -
使用pdf.js预览pdf文件时如何兼容chrome66版本
最新的插件使用的是es6语法有浏览器兼容性问题,不兼容QQ浏览器、跟别说IE 了。最近在做一个需求,在PC端实现预览pdf文件的功能,但是要最低兼容chrome的66版本,因为公司用的chrome浏览器最低版本就是66版本。这个版本试了一下,发现在chrome90以上的版本是可以的,但是在更低版本就会有各种各样的问题,比如不展示或者展示不全,又或者报错等。插件下载地址:链接:https://pan.baidu.com/s/1uUGFuPJ_RXZx3lnQKr-M_g。,都是已经构建好的。原创 2023-10-16 16:16:36 · 2797 阅读 · 6 评论 -
vite进行打包时如何把某个静态文件原封不动地拷贝到打包后的文件中
引入 public 中的资源永远应该使用根绝对路径 —— 举个例子,public/icon.png 应该在源码中被引用为 /icon.png。从代码中可以看到pdfjs这个文件里面是存放pdf.js插件的文件夹,然后这个文件夹放在static文件夹下面,是这样的逻辑结构,├── .env.production # 生产环境打包配置。├── .env.sit # sit环境打包配置。├── .env.uat # uat环境打包配置。├── vite.config.js # 打包配置。原创 2023-10-13 16:13:19 · 2983 阅读 · 0 评论 -
响应头Content-disposition的作用及用法
我们在用做文件下载时,经常会用到响应头Content-disposition来设置文件下载对话框。转载 2023-10-09 17:17:30 · 2576 阅读 · 0 评论 -
vben-admin中渲染table表格时怎么处理不同的数据结构
最近在用vben admin开发后台管理系统,vben admin这个后管端框架封装的非常细,颗粒度非常细,如果了解里面的组件或者api用法,那开发起来非常快。如果不了解,那就非常痛苦了,目前关于vben admin这块的开发问题的博客很少,所以有的问题很难查到。我经历了这样的过程,于是就把在开发中遇到的问题总结下来,希望让能用到的同学少走一点弯路。原创 2023-09-11 18:00:38 · 1206 阅读 · 3 评论 -
前端工程化解决方案
前端工程化是将软件工程相关的方法和思想应用到前端开发中,从而提升前端开发效率、提高产品质量、降低开发难度、减少公司成本的方法和工具。前端工程化贯穿整个前端项目各个阶段,包括代码规范、流程规范、分支管理、程序开发、前后端联调、自动化测试、应用构建、系统部署和监控、运维等。前端工程化是前端开发的趋势,它可以提高开发效率、降低成本、提高代码质量。然而,在实施前端工程化时需要根据项目实际情况进行定制化选型,合理选择工具和框架。优化和测试是工程化中不可忽视的部分,它们对于提升应用性能和稳定性至关重要。转载 2023-08-25 17:16:13 · 118 阅读 · 0 评论 -
在上传前用JavaScript压缩图片
我们已经学会了如何使用 canvas 和 DataTransfer 来设置一个不起眼的小脚本,帮助我们在上传前压缩图片。该脚本将使我们的用户更容易上传图片。当然,我们还有很多需要改进的地方,例如,我们可以调整图像大小以适应最大边界框。将图像裁剪成一定的长宽比。更好地处理错误输入并显示合适的错误信息。确保我们能处理 Safari 内存问题。如果我们需要一个更强大的解决方案,我们可以使用 FilePond[3] 来处理文件上传,它可以调整图像大小、压缩等。转载 2023-08-18 16:04:10 · 263 阅读 · 0 评论 -
Nginx反向代理技巧
简单的说就是A需要向C发送请求,但是C不认识A自然是不愿意的,但是A认识BA向B发送请求,可是B也不会返回什么东西但是他认识可以返回请求C,那么B再次向C发送请求,C看在B的面子上给B返回请求了,B再给A返回请求。。。。具体到开发中就是,前端需要向这个域名调用接口,但是前端开发环境启动项目是服务,直接调用接口会跨域。所以前端需要做一层代理。从直接请求到域名的接口,这对于前端来说应该是无感知的。反向代理隐藏了真实的服务端;切换环境debug。转载 2023-08-17 17:55:54 · 192 阅读 · 0 评论 -
最近遇到的两个小问题总结:git问题和node问题
找到git安装路径中git-core的位置,如:D:\Program Files\Git\libexec\git-core(有可能没有git-core,没有的话我也在环境变量中加上了)注:“D:\Program Files\Git"是安装路径,可能与你的安装路径不一样,要按照你自己的路径替换"D:\Program Files\Git”然后再在其他文件下面试一下(git --version) ,如果是一样的话,并且确定git已经安装的情况下,说明没有给git配置全局变量。的环境变量,发现都是对的。原创 2023-08-09 17:11:03 · 653 阅读 · 0 评论 -
npm install:Could not resolve dependency:peer... 原因和解决方案
安装时忽略所有peerDependencies,忽视依赖冲突,已有的依赖不会覆盖。: 会无视冲突,并强制获取远端npm库资源,即使本地有资源也会覆盖掉。比较保险一点,反正我用了就安装成功了。那么npm:何时使用。即可,其余同样如此。转载 2023-08-09 15:09:21 · 6960 阅读 · 0 评论 -
PC端el-table合并单元格总结
之前做管理系统的时候有这样一个需求,那就是合并首列的单元格(如果名字相同就合并),刚开始代码写的很多,经过优化之后,代码精简了大约100多行,所以就想着把这次优化的过程总结一下。可以看到这个合并单元格的方法有很多行代码,但是我们可以总结一下规律并优化一下代码,达到精简代码的目的。精简后的代码如下(主要是spanMethod这个方法)可以看到代码精简了很多,原创 2023-08-01 14:43:31 · 653 阅读 · 0 评论 -
文件上传、下载的总结
如果要实现自定义上传操作(自己写函数,并定义上传接口),需要给el-upload标签加上http-request属性,并赋予它对应的方法;原创 2023-07-31 11:05:14 · 341 阅读 · 0 评论