- 博客(103)
- 收藏
- 关注
RSS订阅
原创 在Vue中利用Blob对象实现下载文件的超详细教程
如果下载文件是文本类型的(如: .txt, .js之类的), 那么用responseType: 'text'也可以, 但是如果下载的文件是图片, 视频之类的, 就得用arraybuffer或blob，从Blob中读取内容的方法我采用的是使用FileReader。以下代码将 Blob 的内容作为类型数组读取...
2022-03-27 18:00:21
21455
2
原创 因上传的文件过大，前端无法获取到后端返参数据时如何解决？（base64+gzip的解密解压缩处理）
因上传的文件过大，导致请求到的数据为空，后端采用了base64加密+gzip压缩，前端拿到数据后如何进行解密解压缩的转换？
2022-03-27 17:14:19
2850
1
原创 vue3二次封装tooltip实现el-table中的show-overflow-tooltip效果
开发过程中遇到需要根据后端返回的数据长度来判断是否需要使用el-tooltip的情况，想到el-table里面就有这种交互效果，如果不论文字是否超出容器长度都展示tooltip的话，交互效果难免会差很多，所以二次封装了这个组件：1.给目标容器绑定mouseenter事件2.鼠标移入后克隆一下目标元素，并取消该元素的宽度样式3.将克隆元素插入到页面中4.获取克隆元素的文字后将元素从页面移除5.用文字所占宽度跟容器宽度进行对比，判断展示tooltip
2025-03-18 15:51:37
300
原创 模拟deepseek拖拽上传
开发过程中可能会遇到两个疑问：为什么绑定drop 事件后上传不了或者浏览器会直接打开拖拽的文件？为什么将拖拽的元素放在dragleave绑定的模块子元素上时dragleave事件会被反复触发？此篇文章都有解决
2025-03-05 10:01:41
435
原创 前端让代码打包体积更小的6个办法
1、使用gzip进行压缩；2、代码分割；3、压缩代码；4、移除 console 和 debugger；5、优化图片资源；6、移除未使用的 CSS
2025-01-15 15:48:41
276
原创 v3通过pdfjs-dist插件渲染后端返回的pdf文件流，并实现缩放、下一页
通过pdfjs-dist插件来实现将后端接口返回的pdf文件流渲染到页面。对页面中的pdf来进行放大、缩小、上一页、下一页或指定滚动到目标页码
2024-12-03 18:26:04
748
原创 通过指令导入/导出vscode扩展插件
请注意，这个命令是针对Windows PowerShell的。如果你使用的是其他类型的终端（如Linux的bash或Mac的zsh），你可能需要调整命令以适应你的终端环境。例如，如果文件保存在。
2024-11-26 15:31:02
2469
原创 js获取操作系统类型/操作系统版本、浏览器类型/浏览器版本、判断是否为IE或兼容IE内核的浏览器
【代码】js获取操作系统类型/操作系统版本、浏览器类型/浏览器版本、判断是否为IE或兼容IE内核的浏览器。
2024-11-20 10:50:28
458
原创 recogito-js:用于文本注释/图像注释的前端插件
在编辑器生成的文本内容的预览基础上要加上批注功能，用户选中文本后就要弹出批注弹窗，确认批注后右侧会相应展示出批注内容，同时在右侧进行批注的编辑、删除。
2024-06-27 17:14:07
1089
1
原创 vue3中通过vditor插件实现自定义上传图片、录入echarts、脑图、markdown语法的编辑器
vue3中通过vditor插件实现自定义上传图片、录入echarts图表、任务列表、表情包、流程图、时序图、脑图、markdown语法的编辑器
2024-06-26 15:19:19
1876
3
原创 vue3通过vue-video-player实现视频倍速、默认全屏、拖拽进度条等功能
options中的soure.type可选值切换后，type类型一定要和src值返回的数保持一致，否则资源无法加载成功；鼠标点击进度条后视频直接重置到了起点，这个问题可以参考
2024-06-25 18:03:00
3484
2
原创 axios设置 responseType为 “stream“流式获取后端数据
axios+stream这个方法和网上搜索出来的大多数流失接口方法一致，但是在axios中设置responseType为 "stream"，后控制台会警告：The provided value 'stream' is not a valid enum value of type XMLHttpRequestResponseType.因为axios基于XMLHttpRequest原生，而并XMLHttpRequest原生不直接支持responseType: 'stream'这个值。可以使用fetch来发送请求
2024-06-05 10:04:14
12737
4
原创 viewerjs在vue中实现点击图片预览、切换、缩放、拖拽、旋转等功能
本实例提供在vue3项目中实现对指定区域的图片进行预览、拖拽、缩放、播放等基础配置操作，下载以来后在js中在页面挂载完成后开始创建一个Viewer示例，第一个参数是图片所在的区域，第二个参数为Viewer内置的一些工具栏配置...
2024-04-22 10:39:31
1323
1
原创 为什么js无法通过contentDocument获取到iframe内容
在页面中iframe加载到内容的情况下，无论怎么获取，js拿到的iframe内部都是空的，观察发现iframe的地址和项目的地址没有满足同源策略...
2024-04-19 11:04:27
1533
原创 antv/x6自定义节点+小地图+复制/删除节点+拖拽生成节点
"@antv/x6-plugin-stencil": "^2.0.0", // 如果使用 stencil 功能，需要安装此包。"@antv/x6-plugin-clipboard": "^2.0.0", // 如果使用剪切板功能，需要安装此包。"@antv/x6-plugin-keyboard": "^2.0.0", // 如果使用快捷键功能，需要安装此包。"@antv/x6-plugin-dnd": "^2.0.0", // 如果使用 dnd 功能，需要安装此包。9、保存/设置节点数据。
2024-01-26 18:01:19
6178
5
原创 vue3使用@imengyu/vue3-context-menu完成antv/x6右键菜单
vue3使用@imengyu/vue3-context-menu完成antv/x6右键菜单：npm i@imengyu/vue3-context-menu@1.3.6
2024-01-26 17:04:13
2725
5
原创 vue3中socket.io使用（取消自动连接）
1、前端下载socket.io：npm isocket.io-client@4.6.24。2、 vue文件中引入socket.io并与服务端建立连接 。3、监听连接成功/失败事件。3、成功建立连接后发送&接收消息。
2023-12-23 14:20:13
1382
原创 vue3通过monaco-editor实现文本对比功能
monaco-editor必须安装，余下两个根据你的项目类型去下载npm install monaco-editor@0.44.0 --save-devnpm install monaco-editor-webpack-plugin@6.0.0 --save-devnpm installvite-plugin-monaco-editor@1.1.0-save-dev
2023-12-15 17:15:26
2108
原创 ace-builds&vue3-ace-editor代码编辑器+弹窗放大功能
【代码】ace-builds&vue3-ace-editor代码编辑器+弹窗放大功能。
2023-12-07 14:40:19
1618
原创 select懒加载解决el-option数量过多导致页面加载慢
需求：在一个dialog中使用了多个el-select提供选择用户、角色、部门等入口，但是每次打开弹框的时候都需要等很久才能将已选数据回显出来，而且在页面加载完成前鼠标无法操作dailog。先自定义一个监听select下拉框滚动的指令，通过。main.js中全局注册这个自定义指令。
2023-11-08 08:37:26
1406
2
原创 vite+v3批量一次性引入本地图片(简单做法)
【代码】vite+v3批量一次性引入本地图片(简单做法) 开发步骤：在assets/fileTypes文件夹中将你需要的png图片导入，并使用文件类型来命名图片(如docx.png)使用import.meta.globEager将assets/fileTypes下所有的png图片引入通过遍历Object.keys(files)使用正则匹配出每个图片的名称，用文件类型做name，文件路径做图片路径创建一个数组；在img图标的src定义方法，返回文件路径即可
2023-10-13 09:27:33
1796
原创 wangEditor自定义菜单遇到 Uncaught (in promise) Error: Duplicated key ‘clearAll‘ in menu items
富文本插件的时候来回切换导致的，报错的意思是你的富文本编辑器内部已经注册过clearAll这个菜单了，不允许在重复注册。首先要知道，出现这个报错是因为你在使用。
2023-10-11 09:39:29
2181
1
原创 Vue3中使用tinymce全功能演示，包括开源功能
tinymce从引入vue项目到使用步骤，包含修改tinymce数据、引入中文包的两种方式、setContent赋值无效解决办法、工具栏展示方式、更换界面UI主题、插入不间断空格、自动调整编辑器大小、emoji表情、预览、文字计数、列表插件、字体字号等配置
2023-10-10 15:26:02
5570
10
原创 vue中转换base64文件数据后通过blob下载
vue中转换base64文件数据后通过blob下载：可以看到这里我要转换的数据是content字段，即将base64文件数据转换后下载下来，1.atob先解码base64数据；2.获取解码后的字符串长度；3.初始化一个 8 位无符号整型数组...
2023-09-14 11:05:49
1018
原创 git出现警告You are not currently on a branch.代码丢失后的找回方法
在vscode某分支上操作git add 及 git commit后使用git push提交出现的警告。观察vscode左下角分支名称是一个随机码，说明我们当前不在自己的git分支上开发。如果需要提交代码 执行git push origin 新分支名称 即可。git checkout -b 新分支名称。执行上面的命令还原到该提交并创建一个新的分支。是你想要推送到的远程仓库的分支名称。(此处为hash值)
2023-08-30 10:08:15
1234
原创 vue3项目中引入dialog插件，支持最大最小化、还原、拖拽
上图是layui-vue组件库中的layer插件，我的项目使用的是element-plus组件库，在用不上layui组件库的情况下，就单独引入。2.在需要展示弹层的位置引入弹层组件或函数（layer弹层支持以函数/标签的形式使用）1.按照npm地址的Readme操作，在mainjs中引入插件并全局注册。具体的API见上方layui-vue组件库地址。这个弹层插件就可以了。
2023-08-08 17:38:22
2519
原创 v2/v3都适用的拖拽插件sortablejs详细使用方法
在sortablejs绑定具体的dom后有不少人在使用的过程中会发现虽然数据的顺序发生了变化，但显示在页面上的数据顺序缺是乱的，此时大家可以尝试给绑定的dom元素加一个唯一的key值，如果像我一样使用el-table的话就加row-key="id(这个id必须是你tableData中每行row都有的且不重复的key名)"，下面具体介绍下sortablejs在vue项目中的使用方法：
2023-07-11 13:59:45
5199
原创 Cannot read properties of null (reading ‘insertBefore‘)和(reading ‘emitsOptions‘)
页面报错TypeError: Cannot read properties of null (reading 'insertBefore')及TypeError: Cannot read properties of null (reading 'emitsOptions')。在本地无异常，发测试或生产后会报这个错误，是在vue3项目中使用了el-table这个插件后，el-table-column又没有正常渲染导致的
2023-07-11 13:30:05
2451
原创 Day.js转中文，并处理日期fromNow
import dayjs from "dayjs";import relativeTime from "dayjs/plugin/relativeTime";import "dayjs/locale/zh-cn";dayjs.extend(relativeTime);
2023-06-13 09:22:56
1312
原创 vue3移动拖拽插件vueDraggable使用步骤
vuedraggable插件的，在vue3中使用会莫名其妙的报错，即使按照官网的v3用法也无法解决，后面又找到一个适合v3使用的vue-draggable-next插件，用法跟v2版本的vuedraggable插件一致，几乎不需要改什么，直接上代码吧：
2023-05-19 17:48:00
2193
原创 vue3中使用cherry-markDown步骤
在vue3中对cherry-markdown做二次封装，提供上传图片、上传视频、上传音频、上传附件、默认预览模式等功能
2023-05-18 16:27:53
4477
2
原创 前端下载文件，base64数据转blob格式下载
遇到下载需求，后端把文件转成了base64数据返到前端，下面描述下拿到这个base64数据转成blob格式在前端下载的方法：
2023-05-17 17:49:49
529
原创 Uncaught (in promise) Error: Duplicated key ‘uploadAttachment‘ in menu items
先说下这个bug是使用wangEditor富文本插件来回切换后遇到的，先看下有没有为这个组件增加附件插件，如果加了这个附件插件又没在代码中判断插件是否存在，就会出现这个错误，因为附件被重复注册了，解决办法：
2023-04-24 18:45:39
1534
7
原创 v3中wangEditor5使用方法 + 上传图片/视频/附件功能
在vue3中下载wangEditor5插件，为插件配置上传附件功能，二次封装成组件复用在页面中，实时获取用户更新后的数据。
2023-04-24 18:36:52
6892
3
原创 10-20位随机字母数字特殊符号密码
调用方法：passData.value.password = generateRandomString(Math.floor(Math.random() *11) + 10);得到10-20位随机密码。调用方法：validatePassword(value) 为true则校验通过。需求：点击按钮，生产随机密码，同时对用户输入的密码进行规则校验。规则：10-20位密码且必须包含至少一个字母、数字、(
2023-04-24 18:24:35
1646
原创 hover显示滚动条
目标：在card-content盒子内容溢出的情况下，先隐藏滚动条，当用户将鼠标移入盒子内部后，显示滚动条，我这里只用到y轴滚动条。
2023-04-18 17:43:08
1021
1
原创 base64格式(pdf/word/ppt等)文件的下载与预览
后端返回base64格式的文件数据，前端根据接收的数据进行转换后实现对文件的下载和预览方法：
2023-04-17 09:33:09
1629
4
原创 uniapp点击生成商品海报、下载海报、分享海报
开发过程中遇到的根据商品信息生成海报，供用户下载海报 、分享海报等需求，页面结构及js完整代码如下：
2023-02-17 14:30:38
1188
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人