- 博客(97)
- 收藏
- 关注
RSS订阅
原创 在Vue中利用Blob对象实现下载文件的超详细教程
如果下载文件是文本类型的(如: .txt, .js之类的), 那么用responseType: 'text'也可以, 但是如果下载的文件是图片, 视频之类的, 就得用arraybuffer或blob，从Blob中读取内容的方法我采用的是使用FileReader。以下代码将 Blob 的内容作为类型数组读取...
2022-03-27 18:00:21
20361
2
原创 因上传的文件过大，前端无法获取到后端返参数据时如何解决？（base64+gzip的解密解压缩处理）
因上传的文件过大，导致请求到的数据为空，后端采用了base64加密+gzip压缩，前端拿到数据后如何进行解密解压缩的转换？
2022-03-27 17:14:19
2751
1
原创 recogito-js:用于文本注释/图像注释的前端插件
在编辑器生成的文本内容的预览基础上要加上批注功能，用户选中文本后就要弹出批注弹窗，确认批注后右侧会相应展示出批注内容，同时在右侧进行批注的编辑、删除。
2024-06-27 17:14:07
641
原创 vue3中通过vditor插件实现自定义上传图片、录入echarts、脑图、markdown语法的编辑器
vue3中通过vditor插件实现自定义上传图片、录入echarts图表、任务列表、表情包、流程图、时序图、脑图、markdown语法的编辑器
2024-06-26 15:19:19
904
2
原创 vue3通过vue-video-player实现视频倍速、默认全屏、拖拽进度条等功能
options中的soure.type可选值切换后，type类型一定要和src值返回的数保持一致，否则资源无法加载成功；鼠标点击进度条后视频直接重置到了起点，这个问题可以参考
2024-06-25 18:03:00
1639
1
原创 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
4233
1
原创 viewerjs在vue中实现点击图片预览、切换、缩放、拖拽、旋转等功能
本实例提供在vue3项目中实现对指定区域的图片进行预览、拖拽、缩放、播放等基础配置操作，下载以来后在js中在页面挂载完成后开始创建一个Viewer示例，第一个参数是图片所在的区域，第二个参数为Viewer内置的一些工具栏配置...
2024-04-22 10:39:31
1040
原创 为什么js无法通过contentDocument获取到iframe内容
在页面中iframe加载到内容的情况下，无论怎么获取，js拿到的iframe内部都是空的，观察发现iframe的地址和项目的地址没有满足同源策略...
2024-04-19 11:04:27
814
原创 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
3700
1
原创 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
1918
4
原创 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
1126
原创 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
1544
原创 ace-builds&vue3-ace-editor代码编辑器+弹窗放大功能
【代码】ace-builds&vue3-ace-editor代码编辑器+弹窗放大功能。
2023-12-07 14:40:19
1164
原创 select懒加载解决el-option数量过多导致页面加载慢
需求：在一个dialog中使用了多个el-select提供选择用户、角色、部门等入口，但是每次打开弹框的时候都需要等很久才能将已选数据回显出来，而且在页面加载完成前鼠标无法操作dailog。先自定义一个监听select下拉框滚动的指令，通过。main.js中全局注册这个自定义指令。
2023-11-08 08:37:26
1142
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
1368
原创 wangEditor自定义菜单遇到 Uncaught (in promise) Error: Duplicated key ‘clearAll‘ in menu items
富文本插件的时候来回切换导致的，报错的意思是你的富文本编辑器内部已经注册过clearAll这个菜单了，不允许在重复注册。首先要知道，出现这个报错是因为你在使用。
2023-10-11 09:39:29
1358
原创 Vue3中使用tinymce全功能演示，包括开源功能
tinymce从引入vue项目到使用步骤，包含修改tinymce数据、引入中文包的两种方式、setContent赋值无效解决办法、工具栏展示方式、更换界面UI主题、插入不间断空格、自动调整编辑器大小、emoji表情、预览、文字计数、列表插件、字体字号等配置
2023-10-10 15:26:02
4544
10
原创 vue中转换base64文件数据后通过blob下载
vue中转换base64文件数据后通过blob下载：可以看到这里我要转换的数据是content字段，即将base64文件数据转换后下载下来，1.atob先解码base64数据；2.获取解码后的字符串长度；3.初始化一个 8 位无符号整型数组...
2023-09-14 11:05:49
909
原创 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
935
原创 vue3项目中引入dialog插件，支持最大最小化、还原、拖拽
上图是layui-vue组件库中的layer插件，我的项目使用的是element-plus组件库，在用不上layui组件库的情况下，就单独引入。2.在需要展示弹层的位置引入弹层组件或函数（layer弹层支持以函数/标签的形式使用）1.按照npm地址的Readme操作，在mainjs中引入插件并全局注册。具体的API见上方layui-vue组件库地址。这个弹层插件就可以了。
2023-08-08 17:38:22
2190
原创 v2/v3都适用的拖拽插件sortablejs详细使用方法
在sortablejs绑定具体的dom后有不少人在使用的过程中会发现虽然数据的顺序发生了变化，但显示在页面上的数据顺序缺是乱的，此时大家可以尝试给绑定的dom元素加一个唯一的key值，如果像我一样使用el-table的话就加row-key="id(这个id必须是你tableData中每行row都有的且不重复的key名)"，下面具体介绍下sortablejs在vue项目中的使用方法：
2023-07-11 13:59:45
4072
原创 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
2022
原创 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
1094
原创 vue3移动拖拽插件vueDraggable使用步骤
vuedraggable插件的，在vue3中使用会莫名其妙的报错，即使按照官网的v3用法也无法解决，后面又找到一个适合v3使用的vue-draggable-next插件，用法跟v2版本的vuedraggable插件一致，几乎不需要改什么，直接上代码吧：
2023-05-19 17:48:00
2016
原创 vue3中使用cherry-markDown步骤
在vue3中对cherry-markdown做二次封装，提供上传图片、上传视频、上传音频、上传附件、默认预览模式等功能
2023-05-18 16:27:53
3832
2
原创 前端下载文件，base64数据转blob格式下载
遇到下载需求，后端把文件转成了base64数据返到前端，下面描述下拿到这个base64数据转成blob格式在前端下载的方法：
2023-05-17 17:49:49
472
原创 Uncaught (in promise) Error: Duplicated key ‘uploadAttachment‘ in menu items
先说下这个bug是使用wangEditor富文本插件来回切换后遇到的，先看下有没有为这个组件增加附件插件，如果加了这个附件插件又没在代码中判断插件是否存在，就会出现这个错误，因为附件被重复注册了，解决办法：
2023-04-24 18:45:39
1231
5
原创 v3中wangEditor5使用方法 + 上传图片/视频/附件功能
在vue3中下载wangEditor5插件，为插件配置上传附件功能，二次封装成组件复用在页面中，实时获取用户更新后的数据。
2023-04-24 18:36:52
4737
2
原创 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
1180
原创 hover显示滚动条
目标：在card-content盒子内容溢出的情况下，先隐藏滚动条，当用户将鼠标移入盒子内部后，显示滚动条，我这里只用到y轴滚动条。
2023-04-18 17:43:08
881
原创 base64格式(pdf/word/ppt等)文件的下载与预览
后端返回base64格式的文件数据，前端根据接收的数据进行转换后实现对文件的下载和预览方法：
2023-04-17 09:33:09
1250
3
原创 uniapp点击生成商品海报、下载海报、分享海报
开发过程中遇到的根据商品信息生成海报，供用户下载海报 、分享海报等需求，页面结构及js完整代码如下：
2023-02-17 14:30:38
1045
原创 超详细版：HBuilderX中实现uniapp小程序动态tabBar
先在Page.json文件中tabBar/list数组内配置好所有需要展示的页面，这里只需要在list各对象中设置好。自定义tabBar组件：在根目录下创建components/myTabBar/myTabBar.vue文件。根据用户身份或登录状态匹配出需要展示的tabBar页面，建立vuex进行存储。隐藏所有tabBar页面对应的.vue页面的导航栏。最后一步：在各导航栏.vue文件中使用该组件即可。
2023-02-13 10:56:53
4351
3
原创 ECharts柱状图上方添加指定照片
ECharts柱状图上方添加指定照片：在series中添加markPoint，由图片地址、图片所在柱状图位置、图片所处y轴位置组成
2023-02-09 15:50:42
2312
原创 JS导出Echarts图标数据为Excel表格
开发需求需要在Echarts图表右上角添加一个按钮，将图表数据下载为Excel，下面获取到所有echarts数据后通过js手动对数据进行排列和换行的方式完成了需求。
2023-02-01 16:24:11
975
原创 vite打包时通过.env在不同的模式下传递不同环境变量数据
要在打包过程中，根据不通模式获取到不同的环境变量值，需要通过--mode选项标志来覆盖命令使用的默认模式，比如开发环境/测试环境/生产环境都对应不同的标题：1. 先在项目根目录下创建三个.env文件对应三个环境变量；2. 在package.json文件中scripts内传递 --mode 选项标志来覆盖命令使用的默认模式；3. 使用const uploadFileUrl = ref(import.meta.env.VITE_APP_TITLE)
2023-01-30 15:31:53
2411
原创 Vue3报selectValue is not defined at d.onUpdate:modelValue.s.＜computed＞.s.＜computed＞
开发过程中二次封装了一个搜索的组件，子组件内使用了el-select和el-input参数分别对应父组件传入的selectValue和selectText参数子组件内部@change和@input事件来同步触发组件中数据的修改最终本地开发环境一切正常，部署到测试环境和生产环境后出现下方报错：selectValue is not defined at d.onUpdate:modelValue.s..s.报错后开始不自信，反复查看本地都是没有报错了，但是测试环境就是有问
2022-12-06 18:02:11
2215
原创 vue2/vue3 Transition+routerView实现过渡动画效果
这里涉及到两个知识点：Transition+routerView，下面先展示下vue官网相关使用说明：1.Vue 提供了Transition内置组件，可以帮助制作基于状态变化的过渡和动画；2.是基本的动态组件，所以我们可以用组件给它添加一些过渡效果
2022-12-02 09:52:14
3254
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人