会说法语的猪
我生命再怎么粗糙,我都要活得很骄傲
展开
-
Vue常用加密方式
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串,这个过程通常被称为哈希函数或散列函数。固定长度:无论输入的数据有多大,输出的消息摘要都有固定的长度。唯一性:理想情况下,不同的输入应该产生不同的消息摘要,虽然在现实中由于哈希碰撞的存在,这并不总是可能的。不可逆性:从消息摘要不能反推出原始数据。高效性:计算消息摘要的过程应该是快速且高效的。原创 2024-11-13 10:53:48 · 259 阅读 · 1 评论 -
使用浏览器原生API实现录屏功能
本地开发环境中使用正常没问题,但是在生产环境中可能会报错,原因是因为navigator.mediaDevices为undefined了,其实除了navigator.mediaDevices,navigator.clipboard.writeText(‘复制的文本’) 这个复制到剪切板的API也是同样的问题。出现这些问题的原因是浏览器这些自带的一些API都有局限性,可能是为了安全考虑,只有在。好早之前写了个小deme,本来都忘了,现在无意中又翻出来了,所以也来记录一下吧!或者直接先不用图片都可以。原创 2024-10-10 15:01:54 · 261 阅读 · 0 评论 -
requestAnimationFrame
这是浏览器的刷新频率。而requestAnimationFrame不是由js、代码决定的,它不会受代码影响,而是由系统决定的。它的使用也很简单,跟setTimeout差不多,不同的requestAnimationFrame不需要传递第二个参数(时间),直接传递一个回调即可。:由于requestAnimationFrame会在浏览器的下一次重绘时执行回调函数,可以减少不必要的计算,从而节省电量。可能是我这个工具的原因,录出来不太连续,但实际上是都是很流畅的,大家直接拷贝代码可以试一下。原创 2024-09-22 13:44:15 · 208 阅读 · 0 评论 -
鼠标滚动让横向滚动条进行左右滚动
其实很简单的事,想着页记录一下吧,后面用到不用到处翻找,直接从这copy过去就行。原创 2024-08-28 17:28:51 · 283 阅读 · 0 评论 -
通过MessageChannel实现一个深拷贝
深拷贝在前端领域已经是个老生常谈的话题了,说起深拷贝相信大多数人第一反应就是通过JSON,其他的就是可以递归手写一个深拷贝,再就是使用第三方库已经写好的深拷贝,不再重复造轮子,例如:lodash。很早之前也写过关于深拷贝的博文(我们可以看到,这两个对象的属性完全一致,但并不是一个引用,这不就是我们要的深拷贝。上面都是一些说明、描述官网等信息,感兴趣的伙伴可以去了解一下。接口允许我们创建一个新的消息通道,并通过它的两个。) 通过JSON进行深拷贝的一些缺陷等。callback回调。原创 2024-08-25 21:47:34 · 330 阅读 · 0 评论 -
vue动态绑定事件、传递参数
vue动态传递不确定个数的参数到子组件这个还是经常用的,动态绑定不确定个数的事件就不太常用了,写这篇也是因为自己没有好好看官方文档,所以来记录一下。下面的代码示例就采用vue2了,vue3也是一样的。相信大家对vue的父传子已经很熟悉了。假设子组件接受下面三个参数:那我们父组件可以单独传递:也可以一块儿通过v-bind直接传递整个对象,相当于将对象中的进行结构全部传递,官网也有写:https://cn.vuejs.org/api/built-in-directives.html#v-bind原创 2024-08-15 17:41:00 · 294 阅读 · 0 评论 -
使用yx-tiny命令行工具进行图片压缩
平时开发的时候,我们用到图片基本都是ui给到我们的、或者是从PS、蓝湖或者慕客上面切图导出来的图片,这些都是未经过压缩的,体积都比较大,这里就有了可优化空间原创 2022-11-13 14:56:36 · 977 阅读 · 1 评论 -
VUE使用mqtt
1.安装依赖npm install mqtt --save2.项目按需引入import mqtt from 'mqtt'3.使用<template> <div> {{mqMsg}} </div></template><script> import mqtt from 'mqtt' // 配置mqtt var client = null const options = {原创 2021-12-10 11:29:28 · 5628 阅读 · 5 评论 -
防抖、节流
防抖和节流相似,都是为了减小服务器的压力。防抖:比如现在有个输入框,需求用户每次输入能够实时查询相关数据(模糊查询),这时候就需要做个防抖处理,也就是我们尽可能等用户输入完之后再去查询,可以设定个时间,输入完1.5秒或两秒后再去查询(如果在设定的时间又触发事件,会把上次的清除掉,重新计时)。要不然如果用户一直按着不停,一秒钟可能会有很多次请求,会给服务器造成很大的压力,导致页面卡顿节流:就是对连续发生的事件 做一下限制 不要那么频繁。针对可能每秒钟都会有很多次或几十次事件的发生。可以每两秒触发一.原创 2022-02-08 10:58:47 · 560 阅读 · 0 评论 -
低代码、零代码、拖拉拽
我们会发现这低代码平台的模样大致的布局都大差不差,就是左中右布局,左边是一些供拖拽(点击)的基础组件,中间为画板、右边为属性配置,当然具体还得具体看,但整体大致上都是这样的布局。这篇说下关于实现低代码、零代码自己的思路、想法吧。最后再给大家推荐一下自己做的两个低代码、零代码项目,一个是快速生成大屏的、另一个是希望快速生成h5页面,希望能用在uniapp。当然这些说起来容易,思路也清楚,但是真正做起来,真的很复杂,工作量很大,也会碰到各种各样的难点,更会碰到平时开发业务中根本碰不到的棘手的问题。原创 2024-08-03 15:30:07 · 342 阅读 · 0 评论 -
ResizeObserver的使用
这篇说下ResizeObserver API。ResizeObserver接口监视Element内容盒或边框盒或者SVGElement边界尺寸的变化。原创 2024-02-05 18:03:47 · 1014 阅读 · 2 评论 -
openlayers常用示例
简单说一下吧,最近做了十来天的的openlayers,然后稍微研究了一下,这里总结并做了一些示例给大家分享一下,应该是相对常用的一部分吧,由于做的时间比较短,这里写了十来个示例了,有实际项目用到的,也有自己想实现的,根据官网的示例改编总结之后的。虽然只有十几个示例,但是代码量还是很大,所以代码就不在这里贴了,我都写在了Gitee上,大家可以拉下来看源码,每个示例都是单独来写,一个组件一个示例(公用的部分抽离了),相对简洁明了。然后看下目前已经做了的示例吧!原创 2024-02-04 17:31:53 · 1087 阅读 · 0 评论 -
openlayers加载天地图
vue集成openlayers,加载天地图原创 2024-02-04 16:46:06 · 1994 阅读 · 0 评论 -
使用xlsx、xlsx-style导出表格添加背景色;合并单元格部分样式缺失问题解决
我这个是直接通过传入dom生产的sheet页,也可以通过数据生成sheet页,xlsx都有对应的方法,其实不影响我们修改样式。主要关注addRangeBorder(给合并行列赋值样式)、setExcelStyle(设置导出Excel样式)这两个方法。由于上次写的修改样式只关注了单元格的宽度,并没有设置颜色以及没关注到合并的单元格部分样式没设置上等问题,所以这篇来说下。我们通过xlsx可以通过dom元素、或者数据来生产sheet页,然后我们修改样式就操作对应的sheet页就可以了。原创 2024-01-30 16:24:58 · 2314 阅读 · 0 评论 -
canvas能压缩图片?
1. 从上面能看出来在牺牲一些清晰度的情况下,用这种方式压缩还是可以的,特别是一些本身就比较小的图片,但其实这并不是真正的压缩图片,真正压缩图片还是建议使用工具压缩,例如photoshop;2. 大家可以看到我的方法名为:compressJpg 之所以取这个方法名,是因为此方式其实仅支持jpg格式的图片压缩,如果是png格式,可能还会变大,大家可以测试一下,再对比一下图片质量。这是控制台的打印,可见确实是图片的大小小了很多,但其实看图片模糊了很多。这篇简单说一下使用canvas压缩图片。原创 2024-01-20 17:04:52 · 1939 阅读 · 0 评论 -
如何区分浏览的刷新和关闭
为了区分浏览器的刷新和关闭,可以利用window对象的onbeforeunload和onunload事件。这两个事件在浏览器关闭和刷新时都会触发,但是它们的执行顺序不同,可以通过判断它们之间的时间差来区分浏览器的刷新和关闭。在这个示例代码中,我们在onbeforeunload事件中记录了开始时间,然后在onunload事件中计算了时间差。如果时间差小于等于5毫秒,就说明是浏览器关闭,否则就是浏览器刷新。原创 2023-11-15 10:30:35 · 3968 阅读 · 1 评论 -
SecoClient接收返回码超时解决
第三步,找到恢复,点击“高级启动”下的“立即重新启动”,重启电脑:(此时要记住以下步骤)以上方式应该是适用于win11系统,因为我目前是win10系统,所以操作后还是不行。删除并下载安装以下链接中的SVNDrv.sys,解压后粘贴进。然后window搜索设备管理器 -> 网络适配器,找到。第八步,按提示输入“7”禁用驱动程序强制签名。第一步,Windows键进入"设置"第四步,重启后选择“疑难解答”,鼠标右键暂时先停用。第二步,进入"更新与安全"第五步,选择“高级选项”第六步,选择“启动设置”原创 2023-11-10 10:50:06 · 2846 阅读 · 0 评论 -
window.open父子页面自定义事件通信
我们在vue项目中,使用vue-router跳转的时候,在某些需求中可以使用router.resolve({path: '/test'}),返回一个返回一个路由地址的规范化版本,其中包含href属性,那我们就可以使用window.open()来打开一个新的浏览器页签跳转至某个vue页面。这篇就是要说一下之间的通信。原创 2023-11-01 13:48:04 · 677 阅读 · 0 评论 -
Vue3使用Monaco-editor
Monaco-editor,一个vs code 编辑器,需要将其继承到项目。不说闲话了,直接上代码。原创 2023-11-01 12:01:31 · 7308 阅读 · 9 评论 -
Vue3中使用富文本编辑器
在vue3中我们可以使用@wangeditor/editor、@wangeditor/editor-for-vue来实现其功能。原创 2023-10-20 11:16:44 · 3093 阅读 · 0 评论 -
Vue2使用easyplayer
说一下easyplayer在vue2中的使用,vue3中没测试,估计应该差不多,大家可自行验证。然后在public/index.html下再引入即可。看到报错不要慌,大家跟着我处理。习惯性将其封装为单独的组件。会发现控制台有下面报错。原创 2023-08-11 11:55:21 · 1549 阅读 · 0 评论 -
H5中的draggable
draggable 属性规定元素是否可拖动。必须设置,否则没有拖拽效果及事件触发链接和图像默认是可拖动的。draggable 属性经常用于拖放操作。原创 2023-08-06 16:24:48 · 705 阅读 · 0 评论 -
JS监听浏览器关闭、刷新及切换标签页触发事件
蛮简单的东西,知道就会,不知道就不会,没什么逻辑可言。简单记录一下,只为加深点儿印象。原创 2023-08-03 17:11:35 · 10947 阅读 · 0 评论 -
Vue渲染系统模块
我们想要实现一个简洁版的Mini-Vue框架,应该包含三个模块:分别是:渲染系统模块、可响应式系统模块、应用程序入库模块。这篇就来写一下渲染系统模块。剩下两个模块后面有时间再更新。vue渲染系统实现,应该包含三个功能,分别是:① h函数,用于返回一个VNode对象;② mount函数,用于将VNode转为真实dom,并挂载到DOM上;③ patch函数,类似于diff算法,用于对比两个VNode,决定如何处理新的VNode虚拟dom本身其实就是个javascript对象。原创 2023-07-17 13:17:17 · 385 阅读 · 0 评论 -
Vue向pdf文件中添加二维码
这两天刚看到一个需求,简单描述一下,就是我们拿到一个pdf文件流(文件流可以是后端返回的,也可以是从自己本地选的)和一个url链接 ,现在要将url链接生成二维码,并将这个二维码添加到这个pdf文件中,然后再预览或者下载这个pdf文件。灵感出自于我之前写过一篇。原创 2023-06-14 22:15:45 · 1568 阅读 · 0 评论 -
Vue实现锁屏功能
这两天刚做了个新需求,要做个系统锁屏(当然锁的是当前的系统),就类似于电脑锁屏似的。共两种情况下锁屏,一种是无操作一定时间后自动锁屏;第二种是可以按下组合键(快捷键)主动进行锁屏。下面具体来说一下该需求的想法、思路以及实现原创 2023-06-07 21:51:23 · 2668 阅读 · 2 评论 -
Promise类方法
这篇主要讲一下Promise的类方法的基本使用,至于Promise的基本使用这里就不赘述了,之前也有手写过Promise、实现了Promise的核心逻辑。其实我们平时用Promise也挺多的,不过又出现了两个新的语法(ES11,ES12新增了两个),所以这篇就简单说一下,也挺简单原创 2023-05-07 13:38:28 · 1034 阅读 · 0 评论 -
javascript中的严格模式
严格模式通过抛出错误来消除一些原有的静默(silent)错误;严格模式让JS引擎在执行代码时可以进行更多的优化(不需要对一些特殊的语法进行处理);严格模式禁用了在ECMAScript未来版本中可能会定义的一些语法(保留字等)原创 2023-05-03 13:15:20 · 1353 阅读 · 0 评论 -
Vue通用下拉树组件@riophae/vue-treeselect的使用
这个是在若依框架无意中发现的一个下拉树通用组件。@riophae/vue-treeselect 是一个基于 Vue.js 的树形选择器组件,可以用于选择树形结构的数据。它支持多选、搜索、异步加载等功能,可以自定义选项的样式和模板。该组件易于使用和扩展,适用于各种类型的项目。部分注释百度翻译成中文了,但太多了,懒得挨个翻译了,直接看也大概知道啥意思。下面是我测试的一个例子,一般的需求应该足够了。使用自己习惯使用的包管理器安装就可以了。字体样式简单调了一下。原创 2023-04-27 17:21:46 · 31004 阅读 · 5 评论 -
JS实现拼音(字母)匹配(搜索)汉字(姓名)
这就是个模糊查询,我们平常做的都是直接输入汉字去把对应的值过滤出来,但我还真是第一次通过拼音去查询(当然不只是拼音,汉字也是可以的),以前还真没注意这个。唉,这可咋搞,我怎么知道某个汉字(字符串)的拼音的首字母是什么呢?正当我愁眉苦脸的时候,哎,一个库被我发现了,hhhhh~。就是pinyin-match。下面介绍该包的使用,这个包也不大,四百多kb。蛮高效的。下面介绍一下该库的使用。原创 2023-04-26 17:14:35 · 4729 阅读 · 0 评论 -
Vue使用html2canvas和jspdf生成pdf文件
首先jspdf这个库就是用来生成pdf的,那为什么还需要使用到html2canvas。是因为jspdf直接生成pdf的话,用法可能会有些繁琐,并且可能不能保证原来的样式,不美观,也不满足需求。所以我们先使用html2canvas将目标dom元素转为canvas,然后调用canvas的toDataURL方法将其转为base64编码,然后再将图片添加到pdf中就可以了。原创 2023-04-14 13:33:13 · 802 阅读 · 0 评论 -
使用html2canvas将页面或某个dom元素保存/下载为图片
首先我们先使用html2canvas将某个dom元素为canvas,然后可以调用canvas中的方法,例如:toDataURL将其转为base64编码,或者toBlob转为一个二进制对象等等,然后就随意我们怎么操作了,可以进行下载,也可以将base64编码赋给img标签src在页面上再渲染出该dom以图片的方式,类似于复制了,下面来说下具体使用:原创 2023-04-14 09:50:58 · 4894 阅读 · 0 评论 -
Vue使用pdf-lib为文件流添加水印并预览
这次项目中又要预览pdf了,要求还要加水印,做的时候又发现了一种预览pdf的方式,这种方式我觉的更好一些,并且还有个要求就是添加水印,当然水印后端也是可以加的,但是后端说了一堆...反正就是要让前端做,在我看来就是借口、不想做,最近也不忙,那我就给他搞出来好了。下面来介绍一下。原创 2023-03-14 21:59:36 · 5097 阅读 · 12 评论 -
JS函数柯里化
柯里化也是属于函数式编程里面一个非常重要的概念,它是一种关于函数的高阶技术,不仅被用于Javascript,还被用于其他编程语言维基百科的解释:在计算机科学中,柯里化(英文:Curring),又译为卡瑞华或加里化;是把接受多个参数的函数,变成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数,而且返回结果的新函数的技术,柯里化声称“如果你固定某些参数,你将得到接受余下参数的一个函数”总结一下就是,只传递给函数一部分参数来调用它,让它返回一个新函数去处理剩余的参数,这个过程就称原创 2023-02-11 11:50:00 · 738 阅读 · 0 评论 -
vue-seamless-scroll(一个简单的基于vue.js的无缝滚动)
一般在数据可视化项目中经常会看到无缝滚动的表格,即轮播表,我们可以使用 vue-seamless-scroll 来实现,使用起来也很方便。原创 2023-01-29 13:17:57 · 5102 阅读 · 0 评论 -
使用pdfobject预览pdf
之前写过一篇预览pdf的,,大家按需所用一般项目中在上传文件之前可能会有 先预览一下,看是否符合要求,符合再上传,这里先说了pdf文件,使用pdfobject库,也很方便。原创 2023-01-28 17:32:52 · 1246 阅读 · 0 评论 -
Vue使用vxe-table
vxe-table是对element-ui进行了二次封装,基本样式也做了调整,并且把导出、打印等功能也集成进去了,这篇就介绍一下vxe-table的基本使用,其实和el-table差不多,使用起来基本一样。原创 2023-01-27 10:30:59 · 8556 阅读 · 0 评论 -
纯前端导出Excel并修改样式
之前写过一篇前端导出:Vue实现导出功能(无后端配合),但是当时没考虑到样式的问题,后来要求导出的Excel单元格的样式也需要调整,尤其是宽度,第一想到的就是xlsx-style这个包,之前也没用过,这次用一下试着调一下宽度等样式,刚安装上就嘎嘎报错~~~,下面就介绍一下该库是使用,踩坑解决...原创 2023-01-10 16:59:21 · 2767 阅读 · 0 评论 -
基于Element-ui 表单弹窗列表选择封装
不知道怎么描述这个东西了。el-select下拉框大家都知道,但是下拉框只能选择一个,而且如果数据太多的话也不太容易选择,所以这里就是封装了组件包含对应的弹窗,就是能实现多选,而且列表也是分页展示的,选择完之后将对应的名称展示在文本框中,传给后端对应的用逗号隔开(用什么隔开都可以,跟后端商量)的id。这个关联合同就是我们封装的,输入框添加了disabled,不可编辑的,只能通过点击右侧弹窗来进行选择。原创 2023-01-03 17:08:17 · 5311 阅读 · 0 评论 -
转树形结构、遍历树形结构、扁平树形
这篇就是写一下平级结构与树形结构之间的转化,之前也有写过类似的:大家有兴趣可以去看一下,也算是简单巩固一下js吧。原创 2022-12-22 11:26:00 · 783 阅读 · 0 评论