- 博客(26)
- 收藏
- 关注
RSS订阅原创 ant-design/charts饼图顶部label被遮挡
话不多说 放代码 具体解决方式就：在配置中添加padding 如果大小不对了就再把height放大一点。
2025-02-07 16:31:02
201
原创 ios h5中在fixed元素中的input被focus时，键盘遮挡input (van-popup、van-feild)
我使用的是vant组件库，其中一个页面中有一个van-popup组件，van-popup组件中又嵌套了一个van-field组件当点击van-feild输入框时，键盘弹起，输入框显示在键盘上方当van-popup打开时，首次点击van-field时，键盘将van-popup遮挡，导致输入框中内容不可见。失去焦点再次点击后，van-popup被顶起。如果关闭van-popup，则会重复前面的情况下方视频可以看看直观效果：键盘遮挡输入框。
2024-12-12 17:54:21
1956
4
原创 H5中滚动到最底部时再用力滚动后导致的顶部被遮挡的bug
5. 最终解决的契机是我实在没办法了 只能把这种行为用比较简单的方式描述一下 然后搜搜搜 搜到了参考的文章 打开的那一刻 我的第六感就告诉我能解决了 虽然有点暴力就是了 ✅。3. 猜到是局部滚动和页面滚动的冲突 翻遍了全网 找到了滚动到底部后可以禁用外层容器滚动 但是方法都是写js来控制 所以又开始在1和2兜兜转转 ❌。问题描述：当列表滚动到最底部以后 再使劲滚动一下 会显示出来一个大的滚动条 再滚动到顶部的时候 列表中第一个元素被遮挡了一部分。原因：列表滚动到底部时 再滚动就会触发父级容器的滚动。
2024-09-14 15:34:43
365
原创 React18+Antd封装上传到阿里云的上传组件
组件是老早就写了 但是一直有异常问题没有处理 今天处理了一下oss授权参数过期的情况 但是还是感觉不完美 求意识到的大佬点播。这个组件目前还不是很完善 比如自定义占位。
2024-07-11 17:31:12
250
原创 Vue项目打包开发测试环境时给css和js增加hash 解决缓存问题
昨天排查了俩小时 最终锁定是由于环境变量和启动服务时的mode不一致 导致了热更新失效了 排查的过程真是一把辛酸泪 网上别人失效的原因都没在我这里出现 甚至为此我还使用插件测试了一下打包的文件大小和速度 殊不知是热更新gg了。说来更苦逼了 上网一顿搜索 给打包文件加hash挺简单的 但是我这个项目的webpack配置文件就很尴尬 什么modules啊什么plugin啊 都是通过chainWebpack来复写的。所以网上cv过来的那当然是gg 只有js文件加了hash css压根没有单独打包。
2024-04-18 17:56:31
934
1
原创 Next.js跳转时报错:Cannot update a component (`HotReload`) while rendering a different component...
问题描述：做平行路由的官网demo时 点击跳转就报错 但是输入url就会正常显示。缓存目录，然后重新构建和启动项目。
2024-01-25 11:44:03
829
原创 React native运行报错：Unable to load script.Make sure you are either running a Metro server or that...
运行以下命令，这个命令相当于手动打包。并且打包的是生产环境的包、指定了入口文件、指定了bundle的输出目录、指定了静态资源的输出目录。缺陷：每次代码更新都需要执行这个命令。检查本地是否有其它进程占用了8081端口，因为Metro打包运行时自动使用8081端口(我就是这个问题 排查了一天 最后发现本地有别的h5项目用的8081)- 先清理项目，依次输入以下命令。- 返回根目录`cd ..`
2024-01-17 16:16:15
1827
原创 【已解决】span英文数字内容不换行
1. 使用word-wrap: break-word，但是需要指定span的宽度，css3后更名为overflow-wrap了。当左边span超出父元素长度时，即使给父元素设置了换行，子元素也不会换行，导致在小屏幕上会与右侧内容重叠。题外话：这种情况还是比较少见的，其实换行后样式也不好看，只是保证了不会有重叠的情况发生。2. 使用word-break: break-all，不需要指定span宽度。
2023-11-29 22:12:00
1065
1
原创 【已解决】React子组件重复渲染
4. 寻求大佬朋友的帮助，告知我代码中很多useCallback都是无效的，让我使用useCallback包裹B组件，并传递依赖项categoryList和onFilter。当在C组件切换tab或者onBatch时，只要A中有state改变，都会触发B组件的重复渲染，实际B组件的依赖数据是没有更新的，比较浪费。ps：刚开始用react，所以我写的很烂，并且也不是很理解为什么我按照别人的教程一一做了就是失败了。2. B组件中有表单，接收父组件传递过来的categoryList和onFilter。
2023-11-22 22:35:16
1807
原创 uniapp-微信小程序实现swiper左右滚动切换tab，上下滚动加载列表
也需要自定义，由于目前我的系统自带的还是正常的，所以还没有改造，但是体验没有scroll-view的好，因为顶部tab会遮挡下拉刷新的loading状态，后期再改造。3. 每个tab下的list的加载完成状态也需要隔离开，否则导致tab1切换到tab2以后，tab2将控制加载完成的状态改为true后，返回tab1无法加载第2页了。2. 由于最开始的代码是每次切换tab后都会重新请求，导致swiper还没切换成功的过程中，显示的列表错误。1. swiper高度问题，导致滑动不到最底部和最顶部。
2023-11-05 19:36:07
5392
1
原创 Vue框架key使用不当导致的一个奇怪的问题
其实key是唯一的已经是牢记于心的，所以在发现这个问题时我甚至没有去考虑是不是写法的问题，而是一直在调数据，奇葩的就是数据一直是对的，页面中的状态也都是对的，但是我点击对应的某一个就不一样了。当我给列表新增一条未完成的数据，在点击之前已完成的数据时，发现获取到的数据是新增的未完成的这一条，可是在列表对应的数据list中是正确的。经过排查我发现我的v-for的key用的是所有任务所属的公共的id，大概猜到了是虚拟dom的原因。1. 重新进入列表页面，点击已完成的功能正常，数据正常。4. 打印的数据错误。
2023-10-29 18:38:33
147
1
原创 解决Vue3+Vite使用富文本插件quill-image-resize-module打包时报错image-resize.min.js没有默认导出
2. 搜索引擎检索出来的都是引入的报错，可以将ImageResize改为imageResize，未解决。1. 查看quill-image-resize-module源码，正确导出了ImageResize。5. 上github查找是否有类似问题，解决。3. 将默认导入改为按需导入，未解决。4. 卸载依赖重装，未解决。
2023-06-22 11:59:40
3107
4
原创 H5播放视频的坑以及oncanplay和onloadedmetadata的重要性
问题：同样的组件在移动端怎样都无法播放视频，音频、图片、pdf等都可以正常加载，加载的页面状态一直是禁止播放：贴一波源码如果要加载的资源是video，首先会触发handleIChangeVideo这个方法，用于调整样式，用于放在通用组件的合适范围里面然后会触发渲染函数，返回对应的dom，将dom插入到它父组件中，整个弹窗是动态创建的组件排查流程：1. google一圈以为是移动端禁止自动播放导致，然后我将autoplay去掉了也无法解决。
2023-06-07 10:37:25
2082
1
原创 有关npm和yarn缓存的踩坑记录
我本地有多个项目可能用到了一样的依赖，之前执行过安装就会被缓存到本地电脑上，当我执行npm install 或 yarn时相同的依赖会去缓存中读取，而不是从远程仓库下载，可能缓存中的依赖包与项目中需要使用的有冲突或不兼容，就导致了我的项目可以运行起来，但是会产生一些无法预料的错误。我执行了npm cache clean --force，再重新npm install，感动天感动地啊，ok了！此时我觉得已经不太对了，正常来说一套代码我的电脑不行，他的可以，那我就想到了可能和本地的node版本或者依赖包有关。
2023-06-02 11:09:33
475
原创 pinia踩坑：需要直接触发仓库中的方法才可以改值，在定义的方法内部触发没有效果
在A和B以及C中都有修改pinia仓库中数据的操作，C需要用到数据进行回显。一开始将修改的方法放在了父组件A中，子组件通过emit去触发这个方法。直接在子组件中触发仓库中的方法就ok了，还不知道什么原因 ，先记一下。不管怎么尝试 C组件都无法监听到仓库中数据的变化。
2023-05-10 11:51:34
549
2
原创 H5开发环境在微信打开https连接白屏
解决：将vue.config.js中devServe下的https改为false即可，因为需要验证SSL证书，等要发布了再开启。
2023-03-14 22:39:27
871
原创 解决微信小程序引入vant-tabs编译时第一个tab不显示底部线条的问题
网上相关答案是直接判断这个数据有没有或者使用tabs组件上的resize方法 我这里使用wx:if="{{其它可以用作判断的数据}}"和resize都是无效的。原因：当tabs渲染时异步获取的数据还没到 拿不到tab的name 组件无法计算线条宽度。解决方法：在tabs组件上新增wx:if="{{tabsList.leng!第一个已经被选中 但是下面本该有的蓝色线条没有。tabsList是动态渲染tab的数据。
2022-12-24 23:41:19
1184
原创 el-dialog封装成组件踩坑1
最后用$nextTick完美解决 $nextTick可以拿到更新后的dom 让内部的代码在下一次dom更新后再执行。因为用了v-if dialog隐藏的时候就被销毁了 没办法从父组件通过$refs获取dialog实例上的数据了。解决方法：在dialog组件标签外面套一层div 用v-if判断是否显示 就会重新执行生命周期了。dialog封装成组件后 在它的created里面发送请求 发现只会在父组件刷新时发送请求。即使刷新父组件页面重新渲染 dialog被创建后也不会被销毁。而不是打开dialog发请求。
2022-12-19 00:13:01
439
原创 el-Dropdown踩坑1
一切换到v-else的页面点击时都会报 Cannot read properties of null (reading 'setAttribute')代码中包含el-dropdown组件的div是和另一个同级div使用了v-if、v-else控制显示不同的页面。在多个el-dropdown-item外层包了一个el-dropdown-menu 问题解决。最后查了下 elment下拉菜单的组件 以下三者缺一不可。每次一点报错就会加一个 一直以为是点击事件的问题。
2022-12-17 20:55:49
732
原创 element组件Cascader懒加载回显问题
选中面板回显1. 点击编辑后 将后端返回的数据赋值给组件v-model双向绑定的数组中2. 用传过来的id去遍历绑定的options数组 找到那一项3. 懒加载是点击父节点以后才会发送请求获取子节点 所以发送请求后 将结果数组用$set()方法 添加到options中的children属性中 这时候已经完成面板的回显文本的回显 查了很多都不太能解决 最后突发奇想给Cascader属性加了一个ref 可以获取到组件示例实际中有个属性用来设置输入框文本将这个属性重新赋值就ok了
2022-12-16 01:03:47
1141
1
原创 vuex持久化存储工具persistedstate踩坑1
目的：在store根模块引入了子模块 并且实现本地存储化结果使用了reducer存储部分子模块数据 浏览器的localStorage一直没有存储的数据根模块如下：子模块如下：折腾一晚上 也没存进来最后在子模块新增了一个修改state中属性的方法然后用$store.commit()触发了这个方法再打开浏览器就存储成功了结论：本地存储化工具只有在修改了要存储的数据时 才会触发第一次存储
2022-12-13 23:16:48
430
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人