- 博客(62)
- 收藏
- 关注
RSS订阅
原创 vue纯前端使用exceljs导出excel文件
概述本文是使用excel.js 插件结合 vue，实现的纯前端excel文件导出！下面是实现后的实例！大致分为以下几步：一：excel.js 插件的安装及引用使用 npm 或者根据具体项目使用的 包管理工具下载：在具体使用页面中直接 import 动态引入，或者使用require方法：二：创建excel工作簿根据官网方法使用配置，这里采用的 saveAs 方法，这个插件直接搜索下载就行，这里就不做介绍了！如果下载成功，说明组件引入都没有问题，进行下一步操作三：创建excel工作表（sheet栏
2024-11-04 16:33:32
2033
34
原创 Web Serial API 串口通讯
目的 串口是非常常用的一种电脑与设备交互的接口。目前在浏览器上直接使用电脑上的串口设备了，这篇文章将介绍相关内容。 相关资料 Web Serial API 相关内容参考如下： https://developer.mozilla.org/en-US/docs/Web/API/Serial https://developer.mozilla.org/en-US/docs/Web/API/SerialPort https://wicg.github.io/serial/ 这个API目前还处于实验性质，只有
2024-11-01 10:33:36
1175
8
原创 Vue3 集成海康Web插件实现视频实时监控
playURL: String, // 视频urlsplitNum: Number, // 分屏播放，默认最大分屏4*4dataTree: Object, // 树 数据});props: 定义组件接收的属性，包括playURLsplitNumdataTree和。emit: 定义组件触发的事件，如。dataTree: 树形结构的数据。: 树形组件的默认属性。loading: 加载状态。corpvideo: 视频播放容器的引用。videosp: 视频播放区域的引用。width和。
2024-10-29 15:27:34
2643
15
原创 前端文件流下载及文件类型互相转换
charset=UTF-8，所以默认传参的数据类型是纯文本类型的 JSON 对象，不适合带有文件类型的数据，若需要传参带有文件数据，那么需要把 Content-Type 指定为 multipart/form-data，这样传参可以带上文件类型数据。这里简单说下 application/x-www-form-urlencoded，它是标准的默认编码格式（在原始的 AJAX 中，不是 axios），只能上传键值对，并且键值对都是间隔分开的，不能用于上传文件等二进制数据。总结完毕，欢迎评论区留言。
2024-10-21 15:32:17
2396
15
原创 20个很好用的 CSS 动画库
AnimatiSS 是一个预览自定义 CSS 动画的工具，只需单击一下即可获取其代码，将其粘贴到您自己的 Web 项目中。一组 CSS 加载动画，示例包括：弧形、基础型、弹跳、追逐、颜色范围、色轮、不同行方向、点等。一个 CSS 动画库，你可以在这里玩转现成的 CSS 动画集合，并只下载你将使用的动画。轻松创建高度可定制的粒子、彩纸屑和烟花动画，并将它们用作网站的动画背景。易于使用的类库，将为你网站的每个部分添加不同类型的抖动效果。一组简单的动画，可以包含在你的网页或应用项目中。
2024-10-16 18:09:33
1589
8
原创 全局对象Window的API（postMessage）方法深入浅出
例如，当用 postMessage 传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的 origin 属性完全一致，来防止密码被恶意的第三方截获。// document.getElementById('span2').innerHTML = event.origin // 发送消息的来源，可以根据origin来确保期望的发送者。// opener.postMessage('B页面发送过去的数据', 'http://127.0.0.1:5500')
2024-10-11 17:49:09
1706
5
原创 vue3 + element-plus + el-table 实现三层嵌套表格（含分页）
确保每次展开收起 都要将子级收缩起来，并且要把数据及入参清空！当然如果你想要多个行并列展开的话，有一个思路就是将分页 及 相关参数存到每条数据里，要将数据初始化好！项目需求 表格嵌套表格，一共三层表格，第二层基于第一层数据显示（流加载），第三层基于第二层数据（分页加载）。首先我这里使用的是 element-plus 的表格去实现的（含有扩展行 expand配置项），这个图没什么难得，就是逻辑交互可能稍微复杂一点！那个第二层数据 流加载，要确保有一定的高度哈！
2025-01-14 14:39:47
1024
12
原创 前端处理跨域的几种方式
指一个域下文档或者脚本去请求另一个域下的资源，这里的跨域是广义的；同源策略（Same origin policy），简称SOP，是一种约定，它由Netscape公司1995年引入浏览器，它是浏览器核心也是最基本的安全功能，如果缺少同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指“协议+ 域名+ 端口”三种相同；
2024-12-30 17:30:39
1420
7
原创 vue3 + vue3-print-nb（分页打印，批量打印）
概述项目需求 打印功能遇到的一些小问题，记录一下，方便查找！以下是使用示例：main.js 注册1原图内容：问题所在：两个demo层合并后，内容过长，但是打印预览时没有自动分页！当你在搜索这个问题的时候，你可能会见过这种方法：将插件下载到本地然后修改源码在源码里找到getStyle方法使用打印媒体查询，在打印时重新设置body、html的高度。
2024-12-24 11:23:22
1760
14
原创 vue2 动态路由的实现
一般情况下，路由都是前端约定好的，但是每当项目发布上线，或者客户需求新的页面的时候，都需要做出路由改变。这样运维就可以现场支持，方便做出可操作的中户中台，来管理我们的中心项目登录及权限，路由等方面；注意：isDynamicRouting 这个值决定了是否使用动态路由，声明在全局里面！这样就必须使用动态生成路由，由后台返回具体的路由结构体；我这边是这样模拟的；登录成功后记得要将 最上方等你们约定数据结构放到 缓存当中哦！引入路由 vue 组件（望理解打码！
2024-11-14 15:27:11
1095
24
原创 JavaScript 读取及写入本地文件
概述在纯前端 javaScript 中，浏览器环境压根没有直接提供操作文件系统的能力。它不能像 node.js 那样使用 fs 模块来删除或者创建文件。 针对于浏览器出于安全性的考虑，不允许网页随意访问用户的文件系统，以防止潜在的恶意行为。浏览器确实提供了一些有限的文件操作能力，主要是通过以下几种方式：文件上传和下载:文件上传: 可以通过 <input type=“file”> 元素让用户选择文件，然后通过 JavaScript 读取文件内容。文件下载: 可以通过创建 Blob 对象
2024-11-06 18:05:13
4685
27
原创 纯前端实现在线预览excel文件（插件： LuckyExcel、Luckysheet）
注意，https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js这个路径意思是会拉取到最新的luckysheet代码，但是如果Luckysheet刚刚发布，jsdelivr网站可能还没来得及从npm上同步过去，故而使用这个路径还是会拉到上一个版本，我们推荐您直接指定最新版本。废话不多说，上代码！Luckysheet库因为是script引入的，可以通过window.Luckysheet来使用，为避免ts报错，需要定义全局变量。
2024-11-05 14:37:01
3584
9
原创 Sourcetree 启动问题（完美解决）
sourcetree 之所以打开就闪退，是因为没有关闭 sourcetree 关机或者系统自动更新等没有关闭sourcetree就直接关机的行为导致缓存信息不匹配，删除的目的是为了重新加载缓存。
2024-11-05 10:20:53
1099
7
原创 HTTP Cookie深入解析
如果 cookie 是一个持久性的 cookie，那么它其实就是浏览器相关的，特定目录下的一个文件。GMT 和 UTC 都曾是或现在是国际上重要的时间标准，但由于地球自转的不规则性和原子钟的精确性，UTC 已经成为了全球性的标准时间，而 GMT 则更多被用作历史和地理上的参考。持久 Cookie（Persistent Cookie）：带有明确的过期日期或持续时间，可以跨多个浏览器会话存在。（也称为 Web Cookie、浏览器 Cookie 或简称 Cookie）是。Cookie）：在浏览器关闭时失效。
2024-10-21 10:56:22
1636
11
原创 el-radio 和 el-cascader 选择报错 Blocked aria-hidden on a...
element ui 中的单选框组件 el-radio-group 在近期使用中 报错（有关标签属性-aria-hidden），经测试chrome浏览器会出现这个问题。翻译：元素上的Blocked aria-hidden，因为刚刚接收焦点的元素不能对辅助技术用户隐藏。考虑使用惰性属性，这也会阻止焦点。这个方法对于el-radio和el-cascader都适用，但是在样式上会有问题，按钮外廓会有模糊，此时需要设置一下对应的样式。在出现报错的 el-radio-group 组件 上去绑定我们的自定义指令。
2024-10-12 09:56:38
5088
15
原创 Vue3 使用插槽的方式———＜Slot＞
如果父组件没有为某个插槽提供内容，那么子组件的模板中该插槽的位置将显示为该插槽的默认内容（如果有的话），或者简单地留空。在Vue3中，子组件的模板可以定义多个插槽（包括默认插槽和具名插槽等等），定义：允许插槽的名称是动态的，根据组件的状态或其他条件来决定使用哪个插槽。定义：没有指定名称的插槽，用于接收父组件传递的未明确指定插槽名称的内容。定义：带有名称的插槽，用于接收父组件中明确指定插槽名称的内容。定义：一种特殊的插槽，允许子组件将数据暴露给父组件的插槽内容。定义具名插槽，父组件中通过。
2024-09-26 17:13:53
4483
4
原创 css perspective 解析及使用
其实 perspective 属性看对于谁来说，对于父级的及对于子级来说是存在区别的，下面直接上示例，你就能看出其中不同之处。但是给父元素设置perspective属性和给自身直接设置transform：perspective属性有时候效果一样，有时候效果差别却很大）。这个属性需要写在父级，数值越大，意味着你看到的页面就会越远，透视效果越弱。属性的时候，会以元素自身的某个点作为视点，所以呈现出的效果还是一样的。上面效果只存在于一个div元素的时候，跟多个元素，在父级设置这个属性后，会存在差异。
2024-09-25 15:26:19
1405
9
原创 关于 vue3 axios的封装，并发请求相关
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。如要登录后设置 请求头token， 可直接在拿到token后直接设置。为了方便起见，axios为所有支持的请求方法提供了别名（配置项在这里就不多做介绍，官网都有。以上就是完整的示例，欢迎评论区讨论，如有写的不足的地方欢迎指出。封装之前，需要下载axios依赖，这些准备工作做好后才能进行以下操作。以上大致封装完毕，导出相关用法。
2024-09-24 15:15:50
2381
2
原创 sourceTree保姆级教程7：（合并某次提交）
在日常开发过程中，大家有时候并非都是在同一个分支进行开发，可能存在多人的情况下开发。切换到master分支，可以看到master分支落后 develop分支好多版本了，test2.txt文件对于master分支完全是新增文件，所以待会合并某次提交到master分支的时候，应该不会产生冲突的。执行完毕后，可以看到master分支的本地仓库多了一个” 新增test2.txt文件 add func1” 的提交历史记录。这样就完成了，合并某次提交到另一分支的操作。选择待合并的提交记录，右键 遴选并且确定。
2024-09-20 13:59:32
1428
3
原创 sourceTree保姆级教程6：（回滚版本到某次提交）
如果这个时候突然发现前面的两次提交是错误的，现在想回到“提取release分支的某次提交到develop分支”这个版本。有两种解决方式，第一种是删除掉新增test1和新增test2两次提交所加的内容，但是这有个前提，是修改内容很少的情况下才可以采用此方法，否则会陷入无穷无尽的代码比对泥沼。本文讲的是回滚到具体某次提交记录之前，并不是操作回滚提交操作。使用sourceTree 回退操作完毕，注意：回退指的是内容的回退，而不是提交记录的回退。选中最新的提交历史记录，右键-》重置当前分支到此次提交。
2024-09-20 13:37:19
2366
2
原创 sourceTree保姆级教程5：（部分文件提交，撤销及回滚）
已暂存文件里是待提交的，未暂存文件里不需要提交的，这样在一个文件里，就可以提交需要提交的，而不需要提交的也可以保留在工作区，等待下次提交。有时候我们在开发某个功能A的时候，功能A暂时不上线，此时同时又开发了B功能，又存在于同一个分支，现在要求B功能要先上线，然而B功能修改的又是同一个文件。部分代码提交 及 最近一次的撤销回滚操作完毕，注意：撤销回滚只能撤销回滚最近的一次提交，并不能回滚到历史某个提交。可以看到提交历史记录多了一个Revert 反向提交。在最新的提交记录上，右键 回滚提交，点击确定。
2024-09-20 13:16:36
1293
3
原创 SourceTree保姆级教程：（解决冲突）
冲突的解决需要一个外部代码对比工具，这里使用的是Beyond Compare 4，大家可以自己百度下载安装，然后集成到sourceTree软件中。第一块是本地修改的版本，第二块是冲突两者（本地仓库和远程仓库）相同的版本基准，第三块是 远程仓库的修改。第四块是冲突处理后的代码。在实际开发过程中，团队协作虽然是避免操作修改同一个文件，但是有时候也避免不了造成冲突修改同一个文件，那么就必须解决冲突合并。切到sourceTree界面，可以看到多了一个解决冲突的中间文件，由于冲突已解决，直接右键移除。
2024-09-20 11:23:11
4099
6
原创 SourceTree保姆级教程3：（分支创建 及 合并）
将当前分支切换到master分支，鼠标移到到develop分支，右键，选择合并develop至当前分支，也即是主分支。本文讲解使用 sourecTree 创建分支 及 合并分支。废话不多说，直接上图（干活）。此时可以推送到远端，勾选第一个，将本地develop分支推送到远程develop分支。新分支develop，存在于本地。
2024-09-19 17:29:32
2671
2
原创 SourceTree保姆级教程2：（拉取，获取）
本文结束，简单的一批，下篇文章讲解分支 创建 和 合并。蓝色的数字表示几次 commit 提交记录，点击拉取。
2024-09-19 17:18:47
1421
2
原创 SourceTree保姆级教程1：（克隆，提交，推送）
本人认为sourceTree 是最好用的版本管理工具，下面将讲解下sourceTree 客户端工具 克隆，提交，推送 具体使用过程，废话不多说直接上图。
2024-09-19 17:06:42
1113
原创 CSS clip-path 属性的使用
通过定义一个剪切区域来控制元素的可视部分，隐藏元素轮廓之外的内容。这一特性打破了传统矩形布局的限制，开启了创造非矩形、自定义形状设计的大门，对于提升网页和应用的视觉吸引力及交互体验具有重要意义。是CSS中的一个神奇属性，它能够让你像魔术师一样，对网页元素施展“裁剪魔法”——只展示元素的一部分，隐藏其余部分。是一个强大的设计工具，它不仅增强了网页的视觉层次，还推动了创新的用户界面设计，让网页元素的展示更加丰富多彩和引人入胜。可以成为动态图形和交互设计的强大工具，实现元素形状的变化、加载动画或鼠标悬停效果等。
2024-09-19 13:53:25
2310
2
原创 vue使用关于speak-tss插件的详细介绍
voice：要使用的语音，如果未提供，则由浏览器选择默认语音。支持 Microsoft Huihui - Chinese (Simplified, PRC) ，Microsoft Kangkang - Chinese (Simplified, PRC) ，Microsoft Yaoyao - Chinese (Simplified, PRC)lang：语言，如果没有提供，则默认值由您的浏览器决定（下文有声明多种语言）。volume：语音播报的声音，默认为1（音量0-1）。rate： 语速，默认为 1。
2024-09-13 16:18:59
1408
2
原创 基于ts写法的一些 项目中会有所用到的功能函数
项目中可能会用到的功能函数，一般定义到外部文件中，hooks中。在此记录一下：一，判断是否ie浏览器 判断ie的版本二，转意符换成普通字符三，'yyyy-MM-dd HH:mm:ss’格式的字符串转日期四，生成随机数五，根据数组生成tree结构六，判断两个对象是否完全相等 数组去重 数字滚动效果七，验证身份证号 的两种方式， 验证手机号八，文件转为链接，base64转为blob，blob转为file，九，判断某个数字是否为质数 及 某个自然数中的质数的个数十，其它到
2024-09-11 15:20:02
470
2
原创 vue3 的 watch监听的多种方式及注意点
1，基本数据类型：可以直接监听，可获取新旧值。2，引用数据类型：需要deep:true深度监听，但是只能获取新值。要想获取新旧值，要想获取新旧值，需要监听目标数据的深拷贝。
2024-09-11 11:30:05
2108
4
原创 有关树形结构数据的功能函数
本文主要介绍的是 有关树形结构数据的处理，下面主要写了几个针对相关功能的功能函数，在此记录一下：一，在树形数据中，找到某个节点中id为指定值的数据节点（树形结构中所有节点，包括子节点）：二，根据根节点的id将一个一维数组转变为树形数据（rootValue即根节点的id）：三，获取树形根节点的status 值为currentStatus的根节点的节点个数：四，获取根节点的个数（树形结构中所有节点个数）：五，根据传入的id数组，给该节点添加一个disabled属性值为false，其他节点添加一个disa
2024-09-02 17:40:21
285
1
原创 完美webSocket的封装及使用
WebSocket协议是基于TCP协议上的独立的通信协议，在建立WebSocket通信连接前，需要使用HTTP协议进行握手，从HTTP连接升级为WebSocket连接。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。一旦WebSocket连接建立，服务器和客户端就可以通过发送消息来进行实时通信。这种双向通信机制。Websocket 协议与 HTTP 协议没有关系，它是一个建立在 TCP 协议上的全新协议，为了兼容 HTTP 握手规范，在握手阶段依然使用 HTTP。
2024-08-30 17:58:16
2158
转载 解决el-avatar及el-image本地路径的图片不显示问题
项目中有个上传用户头像的功能，但是不是必填项，不上传的话显示默认头像，默认头像配置在asset目录下面。组件，发现使用本地图片路径无法显示，但是使用原生img标签却能显示。
2024-08-23 17:57:58
480
2
原创 关于后台数据文件流的下载及导出
这些方法可以根据具体的需求和项目环境选择使用。需要注意的是，后端返回的文件流需要正确设置Content-Disposition响应头，以指定文件的名称和下载方式。当需要请求相关接口或者是 url 时，后端返回文件流的形式供前端下载，导出。以上8种实现下载的方式，根据不同的需求选择不同的方式。
2024-08-23 16:32:02
1055
原创 11个有用的css编辑网站
官方网站：https://bennettfeely.com/clippy/ 其他： https://www.cssportal.com/css-clip-path-generator/在这里你可以生成多个加载动画并将其下载为SVG、GIF、PNG和其他格式，但它最棒的特点是你可以将这些动画自定义到一个新的水平。官方网站：https://9elements.github.io/fancy-border-radius/可以为Grid生成很棒的css，你可以使用div对其进行自定义，它还将为此创建子元素。
2024-08-21 16:04:20
2614
原创 git stash 主要使用
在实际开发过程中应该都会遇到这种情况：目前你在开发一个新的功能在A分支，这时有一个优先级很高的需求或者是bug需要修复。下面来介绍下主要的 git stash 的命令行使用。首先我们直接将我们未开发完的代码 暂存到工作区（修改的内容） 可以多次使用stash，从最近一次的commit读取相关内容。注意： git stash pop 是获取最近一次暂存进去的代码， 如果你stash了很多次，那么恢复的是最新一次的代码内容。有时候 我们开发多了，stash 进去暂存区的内容多了，自己也忘记具体要恢复那次了。
2024-08-21 13:51:58
293
原创 Notification 分不同实例关闭
vue3使用 element-plus中的Notification 实现一个 消息通知的功能。需求：，每当 socket 通知到位，系统右下角就会自动弹出一个 notification 弹框通知。对应弹框点击后，做对应推送数据的处理且关闭 具体某个 消息通知。（多个消息通知，到底如何处理呢！还有个关键性问题就是 根据需求，点击某个通知后需el-dialog 弹框中处理内容。此时消息弹框 层级比 el-dialog 高，这样就造成了无限点击 出现多个弹框问题。问题解决，就到此结束啦！
2024-08-20 11:27:53
623
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人