前阵子使用表格时，发现有时会异常滚动不了，仔细观察，发现是滚动条出现了。因为 element-plus 使用了自定义的滚动条，导致显示效果还挺隐蔽。 复现过程 当创建了一个表格，并自定义了高度，同时至少有一列为 fixed，那么在超出视口范围时，期望的是鼠标可以直接滚动页面。但因为表格的高度问题，导致页面无法滚动。高度差为1px。 表格默认会向下滚动1px，此时页面无法滚动，停顿后再次滚动，页面才会向下，因为表格此时已经滚动到最下面。 向上同理，方向相反。 这个吧，用户不仔细观察，还不易发现，会以为页面卡住了。 示…

千分位 有些时候，我们需要将数字转为千分位分割展示： '123456789.1234'.replace(/^(\d+)((\.\d+)?)$/, (s, s1, s2) => s1.replace(/(\d{1,3})(?=(\d{3})+$)/g, '$&,') + s2) // '123,456,789.1234' 有特殊需求时，还可以把 3 改为动态数字，通过 new RegExp() 的方式，动态生成正则即可。 切掉小数末尾的0 有些…

在 Vue 中，onMounted 钩子函数会在组件被挂载到 DOM 后立即调用。然而，如果在父组件的 onMounted 钩子函数中尝试获取子组件的 DOM 元素，可能会遇到问题，因为子组件可能还没有完成挂载。 如果需要在父组件的 onMounted 钩子函数中获取子组件的 DOM 元素，你可以使用 nextTick() 方法。nextTick() 方法会在下一次 DOM 更新循环结束之后延迟执行回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 以下是一个示例： import { nextTick }…

收起的内容： 收起后： 如果用 vscode 开发前端，那么有很多配置文件，左侧的目录树会很乱。有个小技巧，使用文件嵌套规则，让这些配置文件隐藏起来。 在 设置 中搜索 File Nesting，可以根据自己的配置习惯来进行自定义设置。 这里面不能使用正则匹配，只有一个 * 通配符，而且每个项只能有一个，所以可能会配置比较多的内容，但一劳永逸。 这是我目前用到的配置项，我习惯将所有配置文件放在 tsconfig.json 下： 项： *config.json 值： ${basename}.*.json, ${bas…

问题出现 在使用 el-table 中，在使用 fixed 字段固定列后，当我们自定义表格的滚动条的宽高后，会出现底部高度不对齐，右侧列宽不对齐等情况。 上图可以看到，当我们滚动到底部后，会出现明显的错位现象。此时，第一时间就去 F12 查看元素，企图重载样式。但是始终无所收获。 解决方案 其实，只要在重载对应的 .el-scrollbar__wrap::-webkit-scrollbar 样式即可： .el-table__body-wrapper::-webkit-scrollbar { height: 10px…

最近找水印工具，发现全部都不支持自动宽度，我就希望找一款可以自动计算文本宽度并展开的水印工具，然后发现没有。于是手写一个，反正也不是很复杂。 然后就越写越多，目前我用着还算比较完善，直接开源，欢迎大家提意见和 PR。 简单介绍一下 任意位置：可以挂载到任意 DOM 节点上，以便在任意位置显示水印 动态计算宽度和高度：水印可以根据内容长度和容器宽度进行自适应调整，确保水印始终显示完整。 自动换行：当水印内容超过容器宽度时，水印会自动进行换行，以便适应容器的大小。 动态监听：X-Watermark 会监听 DOM 变化…

问题 最近工作写了个 H5 应用，本地、测试和正式环境都没啥问题，直接发版~ 嗯，然后就出问题了。有位大佬，用着18年的手机点开了应用。首页内容很长，好家伙，内容全部揉在了一块。真真是首屏展示全部。。。 期初我以为是懒加载的问题，可能机型比较老，不支持 IntersectionObserver，直接换成滚动懒加载，还是不行，我凌乱了。。。 排查 由于手机是人家大佬自己的，不可能给我测试用，我们这边也没有能复现的机型，给我整不会了。 既然是老机型，那一定是版本问题呗。打包降级，从 js 到 css，各种打包降级，还是…

问题 今天发现一个比较有意思的问题。我定义了一个 class，里面有一个 type 属性需要和 code 保持一致，所以很自然我就写了如下内容： class Node { code = ''; get type() { return this.code; } } 这个代码本身没什么问题，也可以正常取值： const node = new Node(); node.type; // 可以读取到对应的值 但是呢，问题来了，我使用这个对象往后端传递的时候， type 丢了~ 看了一下对象结构，估计是和…

今天倒库的时候，提示： Could not find a declaration file for module 'xxx' implicitly has an 'any' type. There are types at 'xxx/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The �…

最近有个小需求，要求格式化数字之后，遇整取整，也就是 100.00 要展示 100。 这个功能也好做，没多想，直接在格式化后面添加： replace(/(?<=\.\d*)0+$|\.0+$/, '') 完美展示，发版~ 但是！！！！！ 问题就出现了，这是一个 app 插件程序，在电脑和 android 程序中都没问题。然后身旁的小伙伴拿个 iPhone 过来跟我说程序打不开了。 我郁闷了，手机里面还没有报错，一脸懵。 先是回退了一个版本，好了~ 嗯，那就是这个版本修改的问题。 找了个 M…