- 博客(82)
- 收藏
- 关注
RSS订阅原创 使用postcss动态设置fontsize，刷新时出现极小页面的问题
由于ui出图是按照1920 * 1080的比例出的，所以我在配置的时候rootValue是192，在配置完成之后，页面的大小样式比例是正常的，开发的时候也都没有问题，但是在浏览器刷新当前页面的时候，会有一瞬间的极小页面出现，然后才是正常比例的页面显现。原因分析了话，应该就是main.js在页面初始化阶段可能还没有被执行，这个时候整个page的font-size应该是默认的192px，那我们给它配置成0了话，这个时候页面在初始化阶段就不会出现了，初始化完成就直接展示出正常的页面了。
2024-11-29 14:41:45
375
原创 el-cascader实现左侧多选，右侧单选
以上是主要核心代码，最后实现的功能效果是正常的，主要的逻辑就是在每次数据改变的时候，拿到第一层节点对应的第二层节点，如果存在有选中的某一项，那么将其他项置为disabled，如果都没有被选择，则将他们的disabled置为false（业务功能目标）。为了解决这个问题，在这之后我尝试了很多方案，比如进行computed缓存，nexttick之后进行更新，将目标对象进行拷贝后再重新赋值，但都无果，至少是我自己这边是无效的。最终实现了我想要的效果。
2024-11-18 09:52:27
362
原创 解决nextjs中Uncaught Error: navigator is not defined at updateDehydratedSuspenseComponent问题
这个错误实际上是由于在nextjs中，不管client components还是server components，它都会先在server side进行初始化渲染，因此，我们可以使用懒加载的方式去import组件。最近在做nextjs项目，在引入一个markdown编译器的时候，报了。
2024-07-26 19:40:21
455
原创 JS当中的!!和??
因为有些情况下我们不能完全排除一些false的情况，比如说0在通常情况下会被判定为false，但当0是一个有效值时就需要绕开通常的判断情况，这是我们可以使用?除了这些之外，其他情况全部都为true。
2024-04-29 14:08:28
210
原创 Find the largest difference【BFE.dev】
【代码】Find the largest difference【BFE.dev】
2024-04-07 11:40:04
402
原创 traverse DOM level by level【BFE.dev】
【代码】traverse DOM level by level【BFE.dev】
2024-04-07 11:30:07
440
原创 uniapp页面使用多个echarts出现数据渲染错乱问题解决
来获取而并不能通过document.getElementById来获取，这样，在组件渲染多个charts的时候，就可以通过获取到当前的实例来精准的渲染出来。但如果将其封装为组件，并在一个页面当中引用多次来生成多个charts图标，那么这个时候就会出现上下之间charts图错乱的问题。经过分析和反复测验，发现只需要在这两个钩子当中重新。，并且init需要通过。
2023-11-27 13:52:35
1738
2
原创 uniapp使用swiper，动态设置内容高度
由于swiperContent部分的高度是动态的，有时候会超过屏幕视口的高度，有时候又小于屏幕视口的高度，所以在这里实现了一套自定义的动态设置swiperContent高度的方法，以下是代码部分。方法获取dom元素，由于这个方法是异步方法，所以我将一步步的计算放在了这个方法的回调当中，如果不这么写的话，会无法实时获取到dom元素的高度。上边图片是本人要实现的大致布局，其中使用了uniapp的swiper，自定义的tabbar，以及自定义的tabs。
2023-04-11 11:34:01
1256
原创 uniapp使用echarts，App端formatter无法显示问题
自定义一个属性替代formatter，但属性值必须是字符串，以便uniapp可以正常取到值，然后我们将字符串使用。uniapp运行在app端的时候，formatter返回的函数uniapp无法解析。以下代码可以直接使用，但注意所需依赖的引入。
2023-04-11 10:56:42
807
原创 uniapp createSelectorQuery()方法获取不到节点问题
uniapp createSelectorQuery()方法获取不到节点问题
2023-03-10 08:35:18
3427
原创 vue3 table更新之后刷新当前页方法
在做toB系统的时候，避免不了表格的一些操作，编辑、删除、新增、复制等，那么在操作完成之后，我们希望能够刷新一下当前表格，并且让表格的页面回到第一页，这个时候可以使用provide和inject来实现代码如下：在我们需要进行更新的页面的代码如下：......
2022-07-11 16:28:16
2860
原创 vue3 setup语法糖使用keepAlive
首先在相应的路由下添加metameta: { title: '缓存页面', keepAlive: true }接下来在我们需要设置keep-alive的页面添加拦截判断，这里使用了include方法<router-view v-slot="{ Component }"> <transition name="el-zoom-in-top" mode="out-in"> <keep-alive :include="keepAliveList">
2022-04-22 14:52:11
3051
原创 vue3 子向父组件传参
模式一script标签引入setup模式<script setup>此模式下需要使用defineEmits来声明emits子组件：<div @click="backData"></div>const emit = defineEmits(['getData']);const backData = () => { emit('getData', '123')}父组件：<Child @getData="getData"/>i
2022-04-20 17:10:25
3722
原创 双token登录验证方案简单总结
今天做项目登录部分，跟旁边同事交流登录过程中封装的一个名为refreshToken的一个API，我有些纳闷，不懂这个refreshToken刷新token有什么用，是要跳转到登录页重新登录获取token吗？如果是这样，那为什么定这样一个名字而不叫做reLogin呢？经过几分钟的交流，我得到了答案：原来，我们的系统为了安全方面的考虑，定义了两个token，一个token是验证登录的token，一个token是refresh的token，这两个token中，前者的过期时间较短，后者的过期时间较长当用户登录
2022-04-13 18:08:03
3052
1
原创 el-menu折叠效果bug记录以及本地解决方案
问题最近在搭建一个新的项目，用了vue3和ElementPlus，在实现侧边栏的时候，发现边栏折叠之后，title文本无法消失，同时下拉箭头还会存在，一开始以为是我自己写错了，后来对照着官网看了好几次也没有什么问题解决后来在网上专门查了一下，发现也有遇到相同情况的同学（同样的问题），但是这个解决方案和我的还不一样，我使用了这个方案在我的代码中是没有作用的，于是我自己想到了其他的方式，如下：这里的el-menu-vertical是el-menu的类名，这样通过使用v-show，在折叠的时候直接
2022-04-07 15:10:25
3465
2
原创 解决v-html中注释标签不显示问题
最近有需求要在页面中回显后端处理过的一些报错信息数据，最初我们通过split，将字符串按照’/n’来生成数组，然后遍历数组，用reduce，为每一项文本内容上添加p标签，最终生成了全部被p标签包裹的html字符但是我们后来测试发现，有些返回的数据是没有在页面中展示出来的，比如说一些使用类似 ‘<??>’ 这样的标签包裹的数据，这些数据属于是注释数据，但这些数据也是需要在页面中展示出来的本来也打算直接食用replaceAll，将 ‘<?’ 替换成其他字符，但是后来觉得不是很优雅，就使用了
2022-03-29 16:38:09
1672
原创 echarts环形图，字体居中方案总结
最近项目中有大屏展示echarts环形图的组件，要求根据后端返回的数组来进行for循环渲染（最多渲染出3个），并且每个环形图中心需要展示相应的主题文字，随着页面的改变，字体始终保持在最中间首先说一下解决方案，我们维护了一个对象，里边描述了只有一个环、有两个环和三个环这些情况下title的left位置然后我们注册了window的resize时间，实时监控页面的宽度，分别在不同的像素域值中调整这个对象的参数，以此来实现字体的动态居中我们每个环中间的字体是使用title来显示的，而不是label，最初我也
2022-03-11 16:58:48
4802
原创 Cannot read property ‘key‘ of undefined 页面假死问题总结
首先，页面假死是由于for循环中key值重复导致的，下边是问题解决的详细描述昨天在使用vue进行页面循环的时候，起初控制台总会报一些错误，说key存在重复，但是我们设置的key值是返回回来每个数组对象中的key，这个key在数据库中是唯一值，但是依然发生错误起初只是控制台报错了，但是当我们循环的列表超过百条的时候，出现了一个严重问题，点击列表进行删除操作的时候页面直接卡住了，但屏幕依然可以滚动，此时控制台报的错误如下：为了解决这个问题，我们最终将key的值设置为了每个对象数组中的label值，这个la
2022-03-11 16:24:48
5264
3
原创 vuex原理的简单总结
vuex首先在最初挂载的时候是通过vue.use()挂在到全局然后进行install初始化，执行其中的mixin方法，而对应的mixin方法中有beforeCreate钩子函数，可以在每个页面初始化的时候执行，而该钩子函数内部的代码则是把store对象绑定在全局跟组件上之后在每个页面使用的时候，就可以调用其中的各种方法进行状态的管理其中getters内部是通过object.keys遍历相应变量或对象，然后再用object.defineProperty进行数据绑定commits和dispatch内部，
2022-02-21 15:39:25
518
原创 总结支付宝支付和微信支付跳转逻辑的区别
前段时间在h5页面中调微信和支付宝支付，发现微信支付的页面跳转逻辑和支付宝支付的页面跳转逻辑是不同的。所以在用户支付成功，或者选择放弃支付的时候就会有差别，这里稍微做一下总结。支付宝支付支付宝支付比较简单，也没有什么坑可以总结的，我们只需要在调起支付的时候往相应的接口中添加上支付后跳转的页面路由即可，在用户支付成功后，页面会跳转到我们在接口中设置的跳转页，如果用户选择不进行支付，则页面直接返回到了原支付页面，就像。逻辑很清晰也很容易理解。微信支付微信支付个人感觉做的效果是没有支付宝好的，不好点在于
2021-12-23 19:00:27
1211
原创 公司新项目上线踩坑总结
上上周接手了一公司给的一个新项目的任务，使用react开发，框架和配置基于umirc.js，这里总结一下这段时间遇到的各种配置问题，以及新项目上线过程中的各种问题。环境配置首先它存在有几个环境配置文件，类似于vue脚手架里边的.env.development这类的文件，而基于umirc的框架，它里边的名称叫做.umirc.dev.ts或.umirc.dev.js。当我们npm run某一个命令，代码环境就会指向某个相应的环境配置文件，然后配置文件中的代码就会被执行，其实这部分很容易理解，大多数人也应该
2021-11-15 12:56:50
1407
原创 标题固定，内容滚动的css布局方式总结
最近在项目中遇到了一个样式问题，需要样式内容中，标题部分粘性定位于一个地方，内容部分滑动，滑动过程中标题位置不动。这是一种挺常见的场景，但对于我来说还真没有在实际开发中遇到很多。于是我最开始的想法就是使用position: sticky，将标题进行粘性定位，效果也很快出现。但是令我没有想到的是，这个position: sticky的兼容性太差了，特别对于IE还有safari，后来测试就来找我，说在老版本的iPad上边用浏览器打开样式是有问题的，我排查后发现，在老iPad上边sticky属性直接就无用了。
2021-11-01 10:52:52
2651
1
原创 关于代码环境的一些总结
我们在开发的时候，都有开发环境和生产环境，分别对应的是development和production，那么这个环境的对象就是process.env.NODE_ENV而基于这两个开发环境，我们可以去package.json文件中配置不同的项目执行命令，并指向我们想要的不同的代码环境，甚至自定义自己想要的其他_ENV当我们配置了其他自定义的_ENV，那么我们就可以在vue.config.js，或者类似的打包文件中进行代理配置...
2021-10-20 18:47:17
1190
原创 css隐藏纵向滚动条同时内容可滚动
设置当前元素的伪元素.element::-webkit-scrollbar { width: 0 !important }添加兼容性// IE 10+.element { -ms-overflow-style: none; }// Firefox.element { overflow: -moz-scrollbars-none; }
2021-09-26 12:02:26
169
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人