自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(19)
  • 收藏
  • 关注

原创 Vue3指令篇 -- 通过实现Element Plus Form添加Tip提示

正常情况下,如果我们想实现给每个 **Form Item** 添加提示,一般的UI设计如下图,一般都是类似于这样的在 label 后面添加一个图标,hover 显示对应的 Tip 内容。这样的话具体的代码实现如下。如果 Form 表单很多,这样就会导致这个文件的代码过于冗长。以此为初衷,下面我们将实现通过指令的方式在所有表单页为**所需的表单项**添加 Tip 提示组件。

2024-04-11 16:42:06 407

原创 前端大文件上传 -- 上传文件到S3或本地服务器

前端大文件分块上传到S3(AWS),其他云服务器实现逻辑应该差不多

2024-04-11 16:00:13 425

原创 Vue3指令篇 -- 通过指令渲染MarkDown文件

Vue3 指令实现渲染 Markdown 文件,Typescript 也适用

2024-04-02 16:22:01 193

原创 Apexcharts实现双/多Line图 - 每条线的点数不同 - 第四节

通过Apexcharts实现不同点数的多直线、多曲线图

2024-01-29 16:34:12 978

原创 Apexcharts实现BoxPlot中绘制散点 - 第三节

当我们通过Apexcharts绘制BoxPlot前要知道BoxPlot的五个值代表分别代表:最小值,最大值,中位数,上四分位数,下四分位数,这五个数值是根据一组数据计算出来的。这时候我想在BoxPlot中显示这些数据点的分布时,我们通过查阅Apexcharts文档知道并不能满足此功能,只有类似下图的功能:如果你按照文档里的例子实现是所有的点会在每个图例的中轴形成一条直性,并不是我们想要的散点图。我们想要的实现效果应该是下面那样,点是分布在每个图例中的。

2024-01-29 15:52:34 460

原创 Vue3 + hook + Apexcharts实现可视化图表渲染的封装 - 第二节 - 图表的全屏功能(Vuex)

上一节中,我们用Vue3 + hook + Apexcharts封装了图表渲染的基础代码。这节我们将在那个基础上进行图表的全屏查看功能。上一级代码中的函数中有通过和对图表数据进行截取,当图表数据有几万条时,像条形图、散点图这些如果一次性渲染出来就会导致页面卡顿,从而影响页面的其他功能。这时我们就可以在初始的时候渲染部分的数据,全屏的时候再渲染全部的数据。

2024-01-15 15:20:17 965

原创 Vue3 + hook + Apexcharts实现可视化图表渲染的封装 - 第一节 - 基础封装

可视化是切图仔的必备技能,大部分需求我都是通过现有工具,不必自己实现。比如EchartsD3Antv等可视化工具,但是我们今天的主角都是这些,是一个叫Apexcharts的可视化工具。Apexcharts是js+svg实现的(ps:Echarts同时支持canvas和svg渲染图表)。因为工作偶然接触到Apexcharts,但是该工具的社区环境是真的差,如果遇到什么问题在网上基本上搜不到信息,只有官方文档。这里对开发使用过程的封装进行整理保存,后续针对其他的问题进行整理。

2023-09-07 10:07:06 460

原创 Vue3指令篇 -- 自定义指令实现表格填充剩余空间

作为表格请求的长度,但是由于显示屏和电脑设置等等导致的差异,有时候会导致表格下方出现大量空白。这时候我们可以根据屏幕的剩余空间去动态改变。的值,以达到较好的效果。因为无法保证每一行都是占用一行,所以出现滚动条是很正常的。PC端网页开发时,表格的CRUD是我们逃不掉的宿命。在渲染表格时,往往是默认。根据自己的场景,表格距离底部的一个距离,一般底部都是有分页组件的。函数,在该函数内实现表格的第一次请求。

2023-08-22 09:56:52 196

原创 前端大文件上传 - 总结(Vue3 + hook + Web Worker实现,通过多个Worker线程大大提高Hash计算的速度)

前端大文件上传 - 总结(Vue3 + hook + Web Worker实现,通过多个Worker线程大大提高Hash计算的速度)

2023-08-18 13:49:20 1408 3

原创 Vue3 + TS 实现表格数据导出为excel(纯前端,不依赖后端)

纯前端实现表格数据的下载,并导出为excel文件

2023-07-31 17:14:18 703

原创 Vue3指令篇 -- 自定义vue指令,实现基于el-table的行内编辑功能 -- 支持使用element组件/自定义组件

自定义vue指令,实现基于el-table实现的行内编辑。代码量减少,每个table自己维护自己的编辑方法,代码逻辑统一封装,使用也很方便。编辑时的表单支持直接使用element组件和自定义组件,通过createApp和h函数就行

2023-06-26 15:39:45 2973

原创 CSS手动实现-Tabs标签反圆角

CSS实现tab反圆角,代替切图方案

2023-06-26 14:45:08 1168

原创 前端代码规范--仅个人

前端代码规范(仅个人)

2022-03-21 17:39:55 583 1

原创 Vue2+element动态弹框表单组件--配置化--低代码(公司内部统一化)

动态表单弹框--可json配置化、低代码、自由度高、容易使用。

2022-03-11 23:19:29 3857

原创 响应式表单组件布局

响应式表单组件布局,表单一行能放下多少就多少,会响应式的控制

2022-03-11 22:55:25 1440

原创 Vue项目列表页到详情页时进行查询条件缓存

Vue项目:列表页跳转详情页时进行查询条件缓存

2022-03-11 22:33:58 2090

原创 Hosts文件修改和修改某个用户对Hosts的控制权限

Hosts文件修改和修改某个用户对Hosts的控制权限相信大家都有一种感受,那就是对于一下技术性的东西,CSDN搜索或者说搜索中文基本上在前几页看到的答案都是基本雷同的,这里分享一下标题的解决方法,不会一步步交,只说关键部分Host文件修改以管理员身份运行cmd或者win+X然后选择Window PowerShell (管理员)执行以下命令:cd C:\Windows\System32\drivers\etcnotepad hosts这样就可以随意修改了修改某个用户的控制权限这个网上搜到

2020-11-16 00:40:01 855 1

原创 宝塔面板 + PM2部署线上NodeAPI

宝塔面板 + PM2部署node项目准备工作环境配置在软件商店中搜索PM2、Apache并安装。如果你安装了Nagix后面可能会有些问题PM2管理器环境PM2的基本使用可以参考宝塔面板官网的操作https://www.bt.cn/bbs/thread-35607-1-1.html这里补充几点:a.切换需要上传代码的nodejs版本b.在模块管理中按照需求安装环境3...

2020-01-06 15:54:43 4413

原创 【物联网】Arduino实现交通灯设计

1、准备器材:红色M5 直插LED1黄色M5 直插LED1绿色M5 直插LED1220Ω电阻3面包板1面包板跳线1 扎2、连接3、代码如下:int redled =10; //定义数字10 接口int yellowled =7; //定义数字7 接口int greenled =4; //定义数字4 接口void setup(){pinMode(redled, OUT...

2019-06-13 19:58:45 6726

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除