- 博客(41)
- 收藏
- 关注
RSS订阅原创 vue中实现列表无缝动态滚动
要想实现列表的动态无缝滚动，这里推荐两款组件，vue-seamless-scroll和vue3-seamless-scroll，组件的用法也非常简单，以下是使用方式。
2024-11-06 16:26:56
159
原创 利用QGIS工具手动绘制线轨迹并生成地理信息geojson文件
前端想要获得一个完整的shp文件或者geojson的地理信息文件，可以利用QGIS工具手动绘制你想要的数据点位，然后导出图层生成对应的文件即可。
2024-10-30 14:44:26
321
原创 vue里实现一个炫酷的动态border边框
实现思路通过伪类元素after和border充当盒子边框，以及自定义属性实现，利用创建一个渐变背景，通过动画修改自定义属性--angle的值，改变其旋转角度，即可实现一个动态的border。
2024-10-24 10:00:00
326
原创 通过ZRender库实现了一个炫酷的大屏loading组件
上一篇文章用ZRender库画了一个大屏的顶部标题，本片文章是通过ZRender实现了一个大屏中炫酷的Loading。我这个大屏是使用vue框架搭建的，vue是单页面应用，首次访问项目会导致有一定的白屏时间，这个白屏时间会给用户造成一种界面卡住的感觉，所以需要加一个loading界面，给用户提醒页面正在加载。
2024-09-03 16:48:02
521
原创 通过ZRender画一个大屏的顶部样式标题
介绍：通过ZRender画一个大屏项目的顶部样式，在其中放入大屏的标题。是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是的渲染器。
2024-08-07 14:07:08
487
原创 记录解决mapVGL画的图层无法在地图上调整离地面高度的问题
激动激动太激动了，项目上有一个问题困扰我很久了，在地图上使用mapVGL画出来的图层是紧贴在地图上的，无法调整离地面的高度，就会导致部分图层会对有些图层有遮盖，去调整zIndex层级也不起左右，我这里是画出来的3D楼宇对一些图标有遮挡，因为3D楼宇有高度，就会对平面的图层会有遮挡效果。可以看到文档上除了经纬度，第三个参数是海拔高度，于是我迅速去修改了我的代码，我在处理mapVGL需要的数据格式时，给加上了100的海拔高度。于是，神奇的一幕来了，我的问题解决了。
2024-07-24 11:16:28
288
原创 解决element-plus的Date Picker日期选择器组件禁用时间的坑
但是，这里有一个小问题，可以看到我选择的是2024-7-9日到2024-7-19日以及2024-7-24日到2024-8-1日，但是可以看到2024-7-9和2024-7-24却没有被禁用。目前需求是有一个表单，其中有多个日期组件需要选择时间范围，并且选择的范围不可以有交集重复，所以这里需要用到Date Picker中的disabled-date属性，来判断该日期是否被禁用。可以看到禁用方法里的判断条件写的也没有问题，于是我打印了一下currentDate，start，end。
2024-07-19 17:18:36
736
原创 在vue3中通过vue-i18n实现国际化多语言切换
之前有在react中介绍过如何使用i18n去实现国际化，那么，在vue里想要实现国际化一般也需要用到i18n这个库，接下来介绍如何使用这个库。
2024-07-15 15:32:03
1048
原创 通过Umijs从0到1搭建一个React项目
有一阵时间没写react了，今天通过umi搭建一个demo项目复习一下react；umi是一个可扩展的企业级前端应用框架，在react市场中还是比较火的一个框架。
2024-07-10 18:07:09
2035
原创 vue3里对Echarts进行封装形成公共组件
在我们使用图表echarts组件时，其实需要对echarts进行封装，形成一个全局公共组件，如果不选择封装成组件，那么按照echarts官方文档来写则每次需要获取实例，然后echarts.init(ref)去初始化图表，这样其实会很麻烦，如果页面里的图表比较多则就会导致页面非常冗余，所以需要对其进行封装。
2024-06-28 17:38:03
583
原创 通过div的contenteditable属性实现富文本自定义公式生成器
最近遇到一个需求，需要实现一个自定义公式生成器，找网上找了好久都没合适的，有找到类似的但是存在一些光标上的bug，让人非常头疼，最后参考了一些部分代码实现了自己的公式生成器，效果如下。
2024-06-26 11:31:48
540
3
原创 前端引入不同的字体风格
为了实现页面更加美观，产品可能希望有不同的字体风格，那么就需要前端去实现不同的字体风格，实现不同的字体风格也非常简单，步骤如下。
2024-06-19 18:00:56
639
原创 解决vite打包vue项目导致JavaScript 堆内存耗尽，打包失败
你可以尝试增加 Node.js 的堆内存限制，以便程序有更多的内存可用。打开package.json文件，编辑build脚本：4096算下来是4GB，就临时给nood分配了4GB的内存。: 如果可能的话，尝试使用流式处理来逐行或者逐块地处理数据，而不是一次性加载所有数据。: 如果你的计算机硬件条件允许，考虑升级到内存更大的计算机，以便有更多的内存可用。: 如果你正在处理大量数据，尝试分批处理数据，而不是一次性加载所有数据到内存中。看了一下最后还是给Node.js增加内存最为暴力，效果也最为明显。
2024-06-03 11:34:59
1153
原创 vue3加载动态路由出现的问题解决
寻找了很多方法，最后明白了应该是npm run build 打包后，代码按照上面的import导入就无法找到组件路径，所以需要换一种引入方法。打印modules可以看到返回了views文件夹下的所有路径，通过遍历这个路径和后端拿到的数据路径，过滤出最后的动态路由。最近遇到了动态加载路由的问题，在开发环境下动态路由正常，打包后部署到服务器后，动态路由无法访问，一直报错。写一个for循环遍历方法，遍历后台返回的数据，并且遍历modules获取到对应的path并返回。
2024-05-30 17:10:07
751
原创 解决vue3+Ts项目，打包报错问题。
可以看到以上报错，很多基本上都是ts的写法问题，有的同事写ts可能不会在意这些问题，例如写了index却没有使用，导入了某个模块却没有使用，再或者定义的变量没有加类型，再打包的时候都会出现问题，那么临时去改肯定来不及，我们可以在package.json中去处理打包命令。可以看到build命令里面有两个命令。vue-tsc和vite build；vue-tsc是TypeScript的编译命令，而vite build是vite的打包编译命令，如何想要打包成功不报错的情况下，需要将vue-tsc命令删掉即可。
2024-05-29 10:56:19
1630
原创 VUE3中实现主题颜色切换
root{这里定义了两套CSS主题，:root会选择到根元素，也就是会选择到Html元素，所以在Html下的元素都可以引用创建好的变量，实现共用颜色主题，这个文件可以直接在main.ts文件中import引入。
2024-04-19 14:55:13
1534
原创 Vue中引用百度地图并基于MapVGL实现3D地图效果，并绘制图层
MapVGL的介绍：MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。导入MapVGL库后，首先我们需要创建一个map.js中间文件，利用jsonp拿到百度地图的数据。按照文档，需要将你的json文件里的数据格式转换成MapVGL图层需要的数据格式。红色的线条就是最终画出来的图层效果。
2024-03-13 17:50:11
1788
6
原创 react拖拽组件dnd-kit拖拽事件与点击事件冲突问题解决
事件捕获用过都不行、寻找了很多办法无果，dnd-kit官方文档给出了Sensors传感器的概念，功能大概意思就是比如鼠标按下拖拽组件需要移动多少个像素才触发拖拽事件、或者是等待多少毫秒触发拖拽事件。例如我写的传感器如下，鼠标按下需要移动5个像素才激活拖拽事件， 这样当地点击功能按钮时，鼠标没有移动，自然就触发了点击事件。传感器如何应用：应用起来也非常简单，在DndContext标签上加个sensors属性就应用好了。记录在拖拽功能中拖拽组件与点击事件冲突，导致点击事件无法触发，点击只会触发拖拽事件。
2023-11-22 10:44:49
1912
原创 React拖拽组件dnd-kit的引入和使用
最近在项目上有个模块需要实现拖拽功能，选了很久的拖拽组件，最后选择了dnd-kit组件库，原因在于这个组件比较新，并且近期还在维护，还有相对应的学习文档可以查看。
2023-10-31 16:31:53
5311
1
原创 基于Expo开发react native的相关常用命令
点击链接就会打开expo的官网，查看打包进度和时间，打包完成后就出现一个Download按钮，就可以下载打好的包，需要注意，这里的命令默认打印的是abb格式的包，用于上架商店使用，如果想打apk 的包，需要加上。启动Expo开发服务器，并在浏览器种打开Expo DevTool控制台。安装指定的 npm 包，并将其添加到 Expo 项目中。和上面的步骤一样，但是环境必须要MAC系统。两下手机也可以呼出调试菜单。Expo项目在模拟器上可以。可以呼出调试菜单，真机可以。
2023-10-08 14:51:14
733
1
原创 Echarts中数据对tooltip小气泡的影响
第二种方法可以formatter来实现，formatter可以自定义toopltip里的布局以及数据，对开发者来说可以非常灵活的实现想要的结构，formatter回调函数打印的params如下；为了解决这种情况，数据为null时不展示这个字段，可以修改toopltip对象中的trigger属性，将trigger:'axis'修改为trigger:'item'。toopltip的用法很简单，只需要在echarts的配置项中添加tooltip属性就好了，但是有一些小的注意点需要注意。
2023-10-01 13:00:00
186
原创 Echarts中虚线与x轴刻度线没对齐解决办法
解决这个问题的方法非常简单，只需要在xAxis配置项中添加axisTick属性，然后添加alignWithLabel:true就可以了。
2023-09-14 16:09:33
930
1
原创 react native中手风琴组件react-native-collapsible的使用方法
【代码】react native中手风琴组件react-native-collapsible的使用方法。
2023-08-16 13:16:40
508
1
原创 react native基于expo上传图片组件expo-image-picker的使用
app中，需要新增一个用户上传图片功能，由于app项目基于expo搭建的，所以直接使用expo中的组件。拿到assets后，组装成你想要的数据，返给后端拿到图片id再接着实现后面的功能。这里注意IOS和安卓下的区别，IOS正常打开相册，安卓打开的是文件管理器。第一步：下载expo-image-picker。第三步：上传方法（我这里用伪代码描述）第二步：在对应的文件中导入。上传图片成功后的回调结果。
2023-08-14 17:00:37
595
原创 基于expo的react native项目报错“RNSVGSvgViewAndroid“问题记录
如果你的项目也报错"RNSVGSvgViewAndroid"，你可以尝试将react-native-svg更新为13.4.0版本，如果还报错，那就继续尝试其他的版本。3、我的版本是13.10.0版本，我这里将它更新为13.4.0版本，重启项目后在安卓环境下就不报错了。这个问题是在项目中找不到名为"RNSVGSvgViewAndroid"的原生组件。2、找到react-native-svg这个依赖查看一下它的版本。1、打开你的项目目录，并找到package.json文件。
2023-07-28 16:23:23
481
1
原创 React Native开发过程中遇到的问题整理
最近在忙着开发app，一直没写文章，今天有空整理记录一下app在开发中遇到的一些问题，部分内容以demo截图展示，截图手机机型是iphone12。
2023-07-19 15:46:02
217
原创 Echarts柱状图第一条柱子遮挡Y轴解决
这个是echarts两边没有留白导致的第一个和最后一个遮挡Y轴，在你的echarts 配置项中大概率出现了 boundaryGap：false这条属性，这个属性在折线图中没有任何问题，但是在柱状图中就会出现这种情况，可以把这条属性注解掉或者把false修改为true就可以解决柱状图遮挡Y轴问题。注解掉或者修改为true就可解决该问题。
2023-06-15 11:08:12
3237
1
原创 react中利用react-i18next实现国际化语言切换
LanguageDetector 在这里的作用是持久化存储，如果觉得这个不好用，可以不用它进行持久化存储，可以自己手写一个语言存储持久化逻辑（建议手写），这里使用是为了方便演示。一般来说，translation对应的对象是一个翻译文档，数据是比较多的，可以在i18n下创建对应的语言文档，然后将文件引进来就可以了。i18n对应的库下载完成后，在根目录文件下创建一个文件夹，文件夹里面创建i18n的文件。这样就配置完了，在配置完i18n文件后，在对应需要翻译的页面引入i18n文件。在需要翻译的页面中，利用。
2023-06-05 17:13:29
1436
原创 Echarts实现动态x轴，并实现部分折线面积图
上一篇介绍了如何实现一条折线图显示不同的颜色，通过markLine图表标线搭配visualMap觉映射组件配合实现，这里的效果我们依旧用markLine搭配visualMap去实现。设置两秒间隔，每次删除头部的一个数据，在尾部再插入一个数据，然后setOption更新echarts图表，就能实现图例demo中的效果了。在echarts中，想要实现动态的x轴，需要使用到定时器；以上代码就可以实现静态的效果，想要让图表动起来，我们需要再去写一个定时器。第一步，我们先实现静态的效果。
2023-05-21 12:00:00
1444
4
原创 在react中通过jsplumb实现动态的流向图
在项目业务上有一个能源流向图的需求需要实现，我选择的是jsplumb框架库，它可以绘制流程图表；大致的动态能源流向图demo如下：想要实现上面的流向图，首先要先熟悉jsplumb的几个api和属性。
2023-05-20 12:00:00
1391
1
原创 react中的echarts数据更新问题
如果对官方文档很熟悉，其实这里的解决办法就很简单，可我是个菜鸡，找了很久才知道，如果新的配置项中包含原来不存在的数据系列或数据点，它们会被添加到图表中。因此，原来的数据依然存在于图表中并且可见。原本的option1有两条数据，option2只有一条数据，所以切换选项时，应该是两条数据变成一条数据，可结果却是图一的一条数据保留了下来，污染了图二，这个问题如果解决呢？简单解释就是新的配置项有原来存在的数据系列，就会替换原来的数据系列，新的配置项没有原来的数据系列，就会将原来的数据系列合并到新的数据系列。
2023-05-05 10:37:59
1474
原创 react中通过配置项的写法实现受控表单组件
在日常项目开发中，有时不可避免的会遇到一些表单功能，个人觉得antd中的表单组件不是那么好用，有时候的取值很受限制，例如select选择框选中后想传出一个对象，而并非是value值，又或者日期选择框想传出一个字符串格式的日期或是时间戳格式的，如果是通过antd表单实现是非常受限制的，我这里介绍一下我常用的写法。config数组对象中的componentType字段是对应的输入框组件名称，不要写错，value字段就是表单存储的数据位置，name是数据对应的key值。方法将组件引入，这里的。
2023-04-17 09:49:43
773
原创 react中实现echarts图表自适应
根据文档可以看出，使用addEventListener监听一个函数，通过函数触发resize()事件从而实现图表自适应，以下是实现自适应的相关代码。移除监听方法，一定要在页面卸载的时候移除监听方法，否则在其他页面改变窗口大小时会报错。echarts官方文档中有一个resize方法，可以实现echarts自适应。改变窗口大小，实现echarts图表自适应。改变屏幕大小后：导致图表溢出容器。
2023-04-12 17:48:50
2057
2
原创 解决折叠面板Collapse上点击复选框会触发折叠面板问题
在项目中有一个小需求，需要在折叠面板头部加一个复选框按钮，点击复选框，修改数据状态，这里的问题是，点击复选框，会触发折叠面板，效果如下。这里我们可以监听复选框的onClick事件，用e.stopPropagation()阻止事件冒泡就可以实现点击复选框不会触发折叠面板了。这里我查阅了一下资料，这是因为事件传递导致的，点击复选框，复选框的点击事件会传递给Collapse折叠面板，所以导致折叠面板打开关闭。
2023-04-04 17:31:11
961
2
原创 react通过Ref优雅的实现弹窗的控制
可以在父组件中修改弹窗的visible属性，然后传给子组件弹窗，打开子组件（不推荐）。：可以在子组件弹窗中写修改visible属性的方法，然后父组件点击事件调用子组件方法打开弹窗（推荐）在react中class写法和hook的写法还是有区别的，接下来我通过简单的demo介绍一下这两种写法。（用的是antd组件库）
2023-03-31 16:14:35
1425
原创 react native开发react-native-debugger调试工具使用教程
众所周知react-native环境搭建比较繁琐，会出现一大堆问题，环境安装好后，调试react-native项目也着实让人头疼，今天推荐一下react-native-debugger调试工具上面是react-native-debugger下载链接。
2023-03-29 17:44:47
4454
7
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人