- 博客(24)
- 收藏
- 关注
RSS订阅原创 VUE3中实现主题颜色切换
root{这里定义了两套CSS主题，:root会选择到根元素，也就是会选择到Html元素，所以在Html下的元素都可以引用创建好的变量，实现共用颜色主题，这个文件可以直接在main.ts文件中import引入。
2024-04-19 14:55:13
291
原创 Vue中引用百度地图并基于MapVGL实现3D地图效果，并绘制图层
MapVGL的介绍：MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。导入MapVGL库后，首先我们需要创建一个map.js中间文件，利用jsonp拿到百度地图的数据。按照文档，需要将你的json文件里的数据格式转换成MapVGL图层需要的数据格式。红色的线条就是最终画出来的图层效果。
2024-03-13 17:50:11
698
1
原创 react拖拽组件dnd-kit拖拽事件与点击事件冲突问题解决
事件捕获用过都不行、寻找了很多办法无果，dnd-kit官方文档给出了Sensors传感器的概念，功能大概意思就是比如鼠标按下拖拽组件需要移动多少个像素才触发拖拽事件、或者是等待多少毫秒触发拖拽事件。例如我写的传感器如下，鼠标按下需要移动5个像素才激活拖拽事件， 这样当地点击功能按钮时，鼠标没有移动，自然就触发了点击事件。传感器如何应用：应用起来也非常简单，在DndContext标签上加个sensors属性就应用好了。记录在拖拽功能中拖拽组件与点击事件冲突，导致点击事件无法触发，点击只会触发拖拽事件。
2023-11-22 10:44:49
737
原创 React拖拽组件dnd-kit的引入和使用
最近在项目上有个模块需要实现拖拽功能，选了很久的拖拽组件，最后选择了dnd-kit组件库，原因在于这个组件比较新，并且近期还在维护，还有相对应的学习文档可以查看。
2023-10-31 16:31:53
2800
1
原创 基于Expo开发react native的相关常用命令
点击链接就会打开expo的官网，查看打包进度和时间，打包完成后就出现一个Download按钮，就可以下载打好的包，需要注意，这里的命令默认打印的是abb格式的包，用于上架商店使用，如果想打apk 的包，需要加上。启动Expo开发服务器，并在浏览器种打开Expo DevTool控制台。安装指定的 npm 包，并将其添加到 Expo 项目中。和上面的步骤一样，但是环境必须要MAC系统。两下手机也可以呼出调试菜单。Expo项目在模拟器上可以。可以呼出调试菜单，真机可以。
2023-10-08 14:51:14
373
1
原创 Echarts中数据对tooltip小气泡的影响
第二种方法可以formatter来实现，formatter可以自定义toopltip里的布局以及数据，对开发者来说可以非常灵活的实现想要的结构，formatter回调函数打印的params如下；为了解决这种情况，数据为null时不展示这个字段，可以修改toopltip对象中的trigger属性，将trigger:'axis'修改为trigger:'item'。toopltip的用法很简单，只需要在echarts的配置项中添加tooltip属性就好了，但是有一些小的注意点需要注意。
2023-10-01 13:00:00
99
原创 Echarts中虚线与x轴刻度线没对齐解决办法
解决这个问题的方法非常简单，只需要在xAxis配置项中添加axisTick属性，然后添加alignWithLabel:true就可以了。
2023-09-14 16:09:33
540
1
原创 react native中手风琴组件react-native-collapsible的使用方法
【代码】react native中手风琴组件react-native-collapsible的使用方法。
2023-08-16 13:16:40
342
1
原创 react native基于expo上传图片组件expo-image-picker的使用
app中，需要新增一个用户上传图片功能，由于app项目基于expo搭建的，所以直接使用expo中的组件。拿到assets后，组装成你想要的数据，返给后端拿到图片id再接着实现后面的功能。这里注意IOS和安卓下的区别，IOS正常打开相册，安卓打开的是文件管理器。第一步：下载expo-image-picker。第三步：上传方法（我这里用伪代码描述）第二步：在对应的文件中导入。上传图片成功后的回调结果。
2023-08-14 17:00:37
370
原创 基于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
273
1
原创 React Native开发过程中遇到的问题整理
最近在忙着开发app，一直没写文章，今天有空整理记录一下app在开发中遇到的一些问题，部分内容以demo截图展示，截图手机机型是iphone12。
2023-07-19 15:46:02
138
原创 Echarts柱状图第一条柱子遮挡Y轴解决
这个是echarts两边没有留白导致的第一个和最后一个遮挡Y轴，在你的echarts 配置项中大概率出现了 boundaryGap：false这条属性，这个属性在折线图中没有任何问题，但是在柱状图中就会出现这种情况，可以把这条属性注解掉或者把false修改为true就可以解决柱状图遮挡Y轴问题。注解掉或者修改为true就可解决该问题。
2023-06-15 11:08:12
2166
1
原创 react中利用i18n实现国际化语言切换
LanguageDetector 在这里的作用是持久化存储，如果觉得这个不好用，可以不用它进行持久化存储，可以自己手写一个语言存储持久化逻辑（建议手写），这里使用是为了方便演示。一般来说，translation对应的对象是一个翻译文档，数据是比较多的，可以在i18n下创建对应的语言文档，然后将文件引进来就可以了。i18n对应的库下载完成后，在根目录文件下创建一个文件夹，文件夹里面创建i18n的文件。这样就配置完了，在配置完i18n文件后，在对应需要翻译的页面引入i18n文件。在需要翻译的页面中，利用。
2023-06-05 17:13:29
847
原创 Echarts实现动态x轴，并实现部分折线面积图
上一篇介绍了如何实现一条折线图显示不同的颜色，通过markLine图表标线搭配visualMap觉映射组件配合实现，这里的效果我们依旧用markLine搭配visualMap去实现。设置两秒间隔，每次删除头部的一个数据，在尾部再插入一个数据，然后setOption更新echarts图表，就能实现图例demo中的效果了。在echarts中，想要实现动态的x轴，需要使用到定时器；以上代码就可以实现静态的效果，想要让图表动起来，我们需要再去写一个定时器。第一步，我们先实现静态的效果。
2023-05-21 12:00:00
1167
4
原创 在react中通过jsplumb实现动态的流向图
在项目业务上有一个能源流向图的需求需要实现，我选择的是jsplumb框架库，它可以绘制流程图表；大致的动态能源流向图demo如下：想要实现上面的流向图，首先要先熟悉jsplumb的几个api和属性。
2023-05-20 12:00:00
1007
1
原创 react中的echarts数据更新问题
如果对官方文档很熟悉，其实这里的解决办法就很简单，可我是个菜鸡，找了很久才知道，如果新的配置项中包含原来不存在的数据系列或数据点，它们会被添加到图表中。因此，原来的数据依然存在于图表中并且可见。原本的option1有两条数据，option2只有一条数据，所以切换选项时，应该是两条数据变成一条数据，可结果却是图一的一条数据保留了下来，污染了图二，这个问题如果解决呢？简单解释就是新的配置项有原来存在的数据系列，就会替换原来的数据系列，新的配置项没有原来的数据系列，就会将原来的数据系列合并到新的数据系列。
2023-05-05 10:37:59
1268
原创 react中通过配置项的写法实现受控表单组件
在日常项目开发中，有时不可避免的会遇到一些表单功能，个人觉得antd中的表单组件不是那么好用，有时候的取值很受限制，例如select选择框选中后想传出一个对象，而并非是value值，又或者日期选择框想传出一个字符串格式的日期或是时间戳格式的，如果是通过antd表单实现是非常受限制的，我这里介绍一下我常用的写法。config数组对象中的componentType字段是对应的输入框组件名称，不要写错，value字段就是表单存储的数据位置，name是数据对应的key值。方法将组件引入，这里的。
2023-04-17 09:49:43
491
原创 react中实现echarts图表自适应
根据文档可以看出，使用addEventListener监听一个函数，通过函数触发resize()事件从而实现图表自适应，以下是实现自适应的相关代码。移除监听方法，一定要在页面卸载的时候移除监听方法，否则在其他页面改变窗口大小时会报错。echarts官方文档中有一个resize方法，可以实现echarts自适应。改变窗口大小，实现echarts图表自适应。改变屏幕大小后：导致图表溢出容器。
2023-04-12 17:48:50
1542
2
原创 解决折叠面板Collapse上点击复选框会触发折叠面板问题
在项目中有一个小需求，需要在折叠面板头部加一个复选框按钮，点击复选框，修改数据状态，这里的问题是，点击复选框，会触发折叠面板，效果如下。这里我们可以监听复选框的onClick事件，用e.stopPropagation()阻止事件冒泡就可以实现点击复选框不会触发折叠面板了。这里我查阅了一下资料，这是因为事件传递导致的，点击复选框，复选框的点击事件会传递给Collapse折叠面板，所以导致折叠面板打开关闭。
2023-04-04 17:31:11
744
2
原创 react通过Ref优雅的实现弹窗的控制
可以在父组件中修改弹窗的visible属性，然后传给子组件弹窗，打开子组件（不推荐）。：可以在子组件弹窗中写修改visible属性的方法，然后父组件点击事件调用子组件方法打开弹窗（推荐）在react中class写法和hook的写法还是有区别的，接下来我通过简单的demo介绍一下这两种写法。（用的是antd组件库）
2023-03-31 16:14:35
1010
原创 react native开发react-native-debugger调试工具使用教程
众所周知react-native环境搭建比较繁琐，会出现一大堆问题，环境安装好后，调试react-native项目也着实让人头疼，今天推荐一下react-native-debugger调试工具上面是react-native-debugger下载链接。
2023-03-29 17:44:47
2921
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人