- 博客(23)
- 收藏
- 关注
RSS订阅原创 前端通过draggable结合fabricjs实现拖拽至画布生成元素自定义编排功能
前端通过draggable结合fabricjs实现拖拽自定义编排功能太久没有更新了，主要最近行情不太好失业了一段时间，一度到怀疑人生，然后就是做的东西大多没有什么含金量，没什么好分享的就很尴尬。刚好最近遇到一个奇葩的需求，一个基地管理的需求，由于项目中的基地很偏，地图上都定位不到，只能通过一个图片作为底图，然后在上面绘制一些图层，需要做一个自定义编排的需求，先上图:上面是实现的demo，首先上html结构代码（技术栈：V3+TS+elementplus）<div class="massif-
2024-08-26 22:34:51
427
原创 ant-vue1.78版监听a-modal遮罩层的滚动事件
我们可以看到弹框过大，右侧已经出现了滚动条，然后左边的下拉框由于随着遮罩层滚动条的滚动，下拉项的列表脱离了原有的位置，就很丑，没有跟随下拉菜单移动，这也许是ant的缺陷，这个时候我们需要监听遮罩层的滚动，及时的让下拉菜单失焦就可以解决这个问题，由于页面加载时弹框是没有出现的，明显是没有遮罩层的我们监听不到，监听时机很重要，上代码。我们开发过程中经常有遇到监听页面滚动的事件需求，去做一些下拉加载或者是下拉分页的需求，我们直接在vue的生命周期中去绑定事件监听非常的方便，但如果是弹框的遮罩层的滚动监听呢？
2023-08-28 14:30:32
641
原创 ant-vue1.78版a-auto-complete表单自动搜索返回列表中的关键字标红
通常在做关键字标红的场景，都是后端返回html结构，前端直接渲染实现，但是如果需要前端处理的话，实现也是很简单的，接下来我直接上应用场景吧。应用场景就是通过关键字去调接口，返回的列表前端去关键字标红，接下来我们看代码。接下来就是我们接口调用后的处理逻辑了。
2023-08-28 10:48:48
1287
原创 结构树递归方法记录
在工作中我们经常遇到结构树的需求，结构树处理会比较麻烦，尤其是后端返回的结构的不是我们想要的结构时，我的场景是后端返回了一个一维的数组对象，我需要通过一个关联的父级id来处理成结构树的数据格式，层级是不确定的，这个时候我们就需要使用递归的方法，下面记录一个一维数组递归成结构树格式的方法，用GPT打的注释，哈哈。在我们具体操作时，其实我们只需要操作最底层叶子结构，因为最底层我的叶子勾选上的话，父级节点也是会勾选上的，下面的记录一个递归给叶子节点的方法。
2023-05-10 14:53:30
372
3
原创 关于antdesign-vue中表格customRender与scopedSlots共用问题的解决
第一次使用ant组件，感触很多，我们工作中我们使用的最多还是table，作为element的钉子户，ant把table分为了columns和data-source,看似灵活ant-table组件，其实配置项很复杂，语法也很复杂，今天就来说一说ant-table，我遇到的需求就是表格最下面出现统计需要合并单元格，先上图片。这个时间我们需要，手动将被合并的单元格，手动配置将自身干掉，将colspan改为0。这样我们的表格就正常，但是如果你合并的单元格有插槽的情况会有问题，我们继续来看。来看一眼最后的效果吧。
2023-04-19 18:31:29
2741
3
原创 前端blob数据类型导出文件（保姆级）
1，第一步封装接口的时候，传responseType字段说明返回的数据类型。2，是准备好将blob数据类型转化为文件并下载的方法，作为公共方法调用，因为项目很多地方都会用到。3，这一步最为关键，主要是异常情况的处理，会有点特殊。
2022-08-22 22:17:21
3610
原创 elementui时间控件限制可选时间范围(精确到时分秒)
我们在开发web端项目时，时间控件用的非常多，限制可选时间也是比较常见的需求，比如已经过去时间不能选，或这未来的时间不可选等，如果仅仅只是限制年月日那非常好解决，那如果是精确到时分秒呢？本以为就这样结束了，一个限制年月日，一个限制时分秒，但是会有一个bug，假如现在是早上8点，那明天的8点之前都不可以选了，这明显是不对的，那我们如何解决呢？...
2022-08-13 14:55:54
5070
原创 NVM下载安装避坑（超详细/带报错解决）
9，下载完之后可能会出现的问题，npm i 或 cnpm i 用不了，由于之前的node卸载了，你的淘宝镜像用不了，或者代理有问题，有问题的话这个时候我们依次执行以下命令，没有问题不用执行。2，下载之前，先 node -v 查看自己当前的node版本，记下来，然后卸载（之前node有配环境变量的先清掉相关的环境变量）4，然后开始nvm安装，安装过程中第一个路径选择是nvm的安装路径，建议选择D盘盘符下就行。1，下载nvm会有比较多的坑，为了坑少一点，保险起见，建议下载1.1.7版本。...
2022-08-11 12:34:03
5544
2
原创 element上传附件（el-upload 超详细）
element上传附件（el-upload 超详细）经常会有人问我上传文件怎么做，这个功能其实比较常见的功能，后台管理系统基本上都有，这就离不开element的el-upload，虽然配置项很多，我们慢慢看，先看结构代码，之中有注释：<div class="flex-div uploaditem"> //这里是上传了那些文件的提示，我没有要默认的文件提示 <el-tooltip class="item" effect="dark" :content="tag.name" pl
2022-05-12 23:04:35
57413
33
原创 前端测试接口，POSTMAN一键调试
前端测试接口，POSTMAN一键调试当我们在开发中，遇到接口有问题时，一般都会找后端battle一下，在这之前我们需要先确认问题，当我们浏览器不方便调试时，我们一般会借助postman，因为比较方便也比较快，浏览器调试还要等代码运行，当然postman我们也需要把headers和body配置上去然后发送请求查看，就很烦。这一步其实可以省略调的，怎么省略呢？我们来看我们只需要打开控制台，newwork中鼠标右击我们的接口，然后依次找到 copy as cURL(bash)，点击复制。然后打开pos
2022-05-06 21:57:10
2246
2
原创 element 动态改变el-date-picker的可选时间范围
element 动态改变el-date-picker的可选时间范围在开发web端项目时，我们经常会遇到通过各种时间范围筛选条件查数据，那我们element的时间选择器是最常用的，有时候由于需求，我们需要给时间控件加上可以选择区间，固定的可选区间还好，如果是动态的呢？先给大家看看我的应用场景。上图就是我的应用场景了，根据左边的年份选择的是哪一年，右边的选择月度区间只能选择那一年以内的月份，前一年的也选不了，左边的年份选择之后右边的月度可选区间动态改变，话不多说上代码。//结构代码块<el-fo
2022-05-06 21:25:21
1919
原创 echarts图表tooltip中嵌套echarts图
echarts图表tooltip中嵌套echarts图我们在工作中，如果echarts的需求比较多的话，难免会遇到嵌套图表的需求，看起非常炫酷，实际上却很简单的图表，先给大家看看应用场景，上原型图（将就看一下，有点丑）上面折线图中嵌套了一个雷达图，当我们鼠标移动到当前X轴对应的数据项时，根据数据生成不同的雷达图。我们都知道生成echarts图时通过获取dom节点实例化生成的，两个问题tooltip里面的dom元素怎么生成？数据怎么处理？话不多说我们上代码（代码中的关键部分有注释）//这里是折线图的组
2022-04-23 22:40:48
3146
3
原创 echarts组件封装动态复用生成N个
echarts组件封装动态复用生成N个由于我们在做项目的时候，相同的echarts图表可能会复用多次，还有可能在同一页面，话不多说上图片，了解一下我的应用场景。上面的页面用到多个echarts图表，图表的类型都是一样的折线图，只是图表里面数据每个都不一样，然后渲染的图表个数是不确定的，根据搜索条件返回的数据来决定渲染几个图表。话不多说上代码：<template> <div> //这里我是用ref获取dom元素,id是传进来的 <div :ref="
2022-04-03 21:14:38
2805
3
原创 echarts仪表盘配置项+charts组件复用+echarts图表自适应
echarts仪表盘+echarts组件复用+echarts图表自适应
2022-01-18 23:06:32
1990
原创 element表单非必填自定义校验规则
element表单非必填自定义校验规则使用场景必填校验规则与自定义校验规则重写自定义函数解决bug使用场景众所周知element自带了一些校验规则，比如说校验一些值的类型我们可以改变input的type属性来达到我们想要效果，如何是必填，我们rules中加入required为true就好，如果你的表单中的值不是必填项，但只要有值就要校验值的格式呢？格式的规则element本身没有，所以我们要自定义校验规则。两个问题，自定义校验规则怎么写？非必填怎么做？必填校验规则与自定义校验规则首先我们看必填
2021-07-31 22:38:46
4842
3
原创 vue后台管理系统之权限管理
vue后台管理系统之权限管理权限管理概念菜单的权限路由的权限权限管理概念还是老规矩先捋概念，权限管理分哪几块？首先用户是分角色的，然后每个角色有不同权限，这是由你的账号性质决定的，然后分为菜单权限，路由的权限，按钮的权限，接口的权限。今天我们主要聊一聊比较核心菜单和路由的权限。话不多说上代码。先上顶层代码。gettree() { //这个方法是获取结构树的方法，也就是我们菜单的权限，决定显示哪些菜单。 getTree().then((res) => {//这个接口换你自己封装
2021-07-30 01:02:09
1356
1
原创 本地代码被删场景还原，git命令之找回代码
git本地代码被删之找回代码并上传使用场景，希望大家不要犯这样的错本地代码什么情况下会被误删git找回本地代码使用场景，希望大家不要犯这样的错事情是这样的，在公司开发，由于电脑太破，公司给我换了一台配置好点的电脑，但是电脑是别人用过，我装好环境后，由于电脑本来就有git，我直接先拉了代码，然后清了git账号，接下来问题就来了。（记住一定一定要，先清git账号和邮箱再拉代码进行开发）本地代码什么情况下会被误删当我开发完之后提交代码，只能add却无法commit，提示我的分支是干净的，没有追踪到，
2021-07-25 00:14:13
1240
1
原创 一篇文章带你彻底了解git命令，在公司轻松管理代码
git命令管理项目git使用场景单人开发（单分支）多人开发（多分支）git使用场景很多人在开发时，大部分时间都是在研究需求，git命令操作可能也并不是很熟悉，现在越来越多的人开始用可视化工具操作，但是可视化工具安装比较麻烦，跳过注册也尤为麻烦，安装也依然要以安装过git为基础，其实git命令行操作还是很方便的，接下来就和大家分享我的git操作心得吧。其实大部分人在git命令操作时，只有两个时候是容易报错的，那就是pull代码的时候，然后就是merge分支的时候，接下来就从这个这两个方面以单人开发和多人
2021-07-12 23:54:46
246
2
原创 小程序登录之token
一般情况下的小程序登录都是通过code去拿openid，但是尤其公司业务的需要，我们可能还是通过token的形式去判断登录状态，话不多说直接上代码。onLaunch() { //首先在appjs里一进来就做登录 let that = this; wx.checkSession({ //首先检测登录 success: function(res){ //如果是登录状态的话 if(utils.get("userInfo")) { //本地有用户信息的话
2021-05-28 23:50:00
2959
原创 前端小程序接口参数签名验证，防止数据泄露
小程序的接口参数签名一般来说接口参数签名，是为了防止数据泄露，接口参数签名也有其默认的规则，接下来就一起来探讨吧，话不多说直接上代码！当我们所有的方法都准备好，怎么用呢？直接上代码这些配置好就可以正常请求接口啦，如若有错请多多指正，相互学习，谢谢。太热了，我要去喝肥宅水了，哈哈。。。。一般来说接口参数签名，是为了防止数据泄露，接口参数签名也有其默认的规则，接下来就一起来探讨吧，话不多说直接上代码！//首先这是我在utilsjs文件里做参数签名需要的方法timest(times){ //通过时间戳生成
2021-05-28 23:16:06
1225
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人