前端开心果-优快云博客

转载在线图床管理系统基于Vue3+ts+koa2

市面上较流行的桌面应用程序图床是`PicGo`，使用`electron-vue`开发，需要下载安装并配置图床，略微麻烦。故而开发了在线的轻快图片管理系统，基于`vue3.x + typeScript + Vite + Koa2 + Mysql`开发的前后端分离图床系统，使用该系统可以不需要每次都配置图床。

2023-02-17 10:20:41 1926

原创 vue导出文件

项目上经常会遇到导出的需求，接口返回文件流，前端拿到文件并保存到本地。

2024-09-11 16:33:40 520

原创大屏适配方案

开发语言：Vue + Echarts主要是解决界面缩放情况，大屏内容自适应的问题一般设计稿的比例是1920*1080，就是16:9。解决方法：适合于适配不同比例，可以采用vm、vh，在屏幕缩放时有自适应的效果。

2024-09-06 09:38:16 622

原创 axios设置responseType: ‘blob‘，获取接口返回的错误信息

在axios的请求中当后端接口返回的是文件流的情况下，我们需要在请求参数里面设置。，如果接口报错，默认前端无法获取后端返回的错误信息。network中返回的是文件流数据。

2024-09-03 16:23:02 1501

原创 js中scrollIntoView第一次不生效，第二次生效

方法用于将元素滚动到可视区域。如果在页面加载后立即使用，可能不会生效，因为页面可能还没有完全渲染或者加载完成。如果是因为元素还没有完全渲染完成，可以在。关键是确保在页面完全加载和渲染之后再调用。

2024-07-12 09:43:20 642

原创 vue根据图片url下载图片跨域

【代码】vye根据图片url下载图片跨域。

2024-06-21 17:55:28 858

原创 perfect-scrollbar缩小浏览器窗口滚动条无线滚动的bug

https://github.com/mdbootstrap/perfect-scrollbar/issues/153

2024-06-21 13:40:09 528

原创 vue实现不预览PDF的情况下打印pdf文件

前景：默认情况，实现打印需要根据预览的内容进行打印。但是当只有打印按钮存在，不预览文件内容的情况下，实现打印的话，可以通过后端接口返回服务器上PDF的地址,前端通过隐藏的iframe标签中src可实现预览功能。

2024-06-19 15:17:04 1190

原创 vue上传文件拿到File，下载文件到本地

【代码】vue上传文件拿到File，下载文件到本地。

2024-06-19 12:36:43 644

原创 uniapp中利用百度云OCR实现身份证识别功能

搜索产品（例如文字识别）-> 立即使用 -> 免费领取 -> 创建应用（跟着步骤走就好了）创建成功后，应用列表，如下图进入管理页面。

2024-05-13 17:15:10 918 1

原创表格单列相同字段值合并

用specName(el.specName === row.specName)和id的区别(el.id === row.id)，使用id的时候id是唯一值，判断的时候不会出现重复情况，使用specName的时候，如果有重复的值，会出现合并错位的情况。解决方案：先按照specType进行排序，然后按specType的值进行分组，合并的规则是每一个分组的第一列进行合并{

2024-04-15 09:10:41 361

https://cn.vuejs.org/v2/guide/render-function.html#%E5%9F%BA%E7%A1%80https://github.com/vuejs/jsx-vue2#installation示例：vue2中使用iview的page组件方式1方式2：将render里面的内容提取到自定义组件里面ShowUndo.vuevue3https://staging-cn.vuejs.org/guide/extras/render-function.html#js

2024-04-12 11:23:10 718

原创 js比较对象a和对象b中不相等的地方，取出对象b中不等于对象a的键值对

判断对象a是否包含了对象b的某个属性，如果没有则说明这个属性是对象b独有的；同时也比较了对象a和对象b中对应的属性值是否相等，如果不相等则说明这个属性在对象b中与对象a不同。函数接受两个对象a和b作为参数，返回一个新的对象，包含了对象b中不等于对象a的键值对。通过遍历对象b，比较对象a和对象b中对应的键值对是否相等来找出对象b中不等于对象a的键值对。

2024-01-11 09:43:22 717

原创 highcharts的甘特图设置滚动时表头固定，让其他内容跟随滚动

效果图：最左侧的分类列是跟随甘特图滚动的，因为这一列如果需要自定义，比如表格的话可能会存在行合并的情况，这个时候甘特图是没有办法做的，然后甘特图的表头又需要做滚动时固定，所以设置了甘特图滚动时，让指定元素跟随滚动。

2023-12-26 16:40:09 1498

原创 vue中预览pdf的方法

vue中预览pdf

2023-12-13 10:03:23 1804 1

原创 vue中对pdf文件和路径的处理

地址栏输入url可以直接预览的pdf，这种我们可以直接使用vue-pdf进行预览。

2023-12-07 14:38:06 1341 1

原创 iview的input输入框修改输入值后输入框中的值不更新的问题

iview的input输入框修改输入值后输入框中的值不更新的问题。

2023-10-20 13:44:31 864

原创 echarts使用custom类型绘制矩形

echarts中根据坐标点和点的宽高绘制不同大小的矩形。

2023-09-28 15:12:26 1970

原创 vue中打印指定dom元素

和`window.print()`效果一样，调出打印窗口，只是当前使用的插件是`vue-print-nb`

2023-09-11 16:48:07 1154

原创服务器发送事件Server-sent events详解与示例

Server-Sent-Events（SSE）是一种HTML5 API，用于在服务器和客户端之间实时推送数据流。 SSE可以用于实现实时通知、实时聊天、实时数据更新和实时监控等功能。

2023-09-04 17:18:36 5890 1

原创 vue中使用tailwindcss

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。

2023-08-31 11:30:37 1069

原创 js监听页面是否设置全屏

js监听页面是否设置全屏

2023-08-16 12:55:42 1414

原创每隔5分钟调用一次接口

【代码】每隔5分钟调用一次接口。

2023-08-15 15:39:37 847

原创解决iview的poptip组件内使用datePicker组件,在选择时间后会关闭poptip组件

`poptip`组件内使用了`datePicker`组件，在`datePicker`组件选择时间后关闭时间弹框的同时也会关闭`poptip`的弹窗。

2023-08-03 16:39:56 563

原创看了这篇文章，我也会用grid布局了

网格布局是由一系列水平及垂直的线构成的一种布局模式，使用网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。一个网格通常具有许多的「列（column）与行（row）」，以及行与行、列与列之间的间隙，这个间隙一般被称为「沟槽（gutter）」。Grid 布局与 Flex 布局有一定的相似性

2023-07-27 13:02:36 1005

原创 javascript正则表达式的进阶介绍

正则表达式用于匹配字符串中字符组合的模式。在js中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法

2023-07-25 12:24:21 156

原创 javascript正则表达式的基础介绍

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。本章介绍 JavaScript 正则表达式。

2023-07-24 17:11:48 83