差两个像素让我很难受，这问题绝不允许留到明年！ - Kagol
source link: https://www.cnblogs.com/kagol/p/16981126.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
2022年8月8日，linxiang07 同学给我们的 Vue DevUI 提了一个 Issue：
#1199 Button/Search/Input/Select等支持设置size的组件标准不统一，并且认真梳理了现有支持size属性的组件列表和每个组件大中小尺寸的现状，整理了一个表格（可以说是提 Issue 的典范，值得学习）。
不仅如此，linxiang 同学还提供了详细的修改建议：
- 建议xs、 sm 、md、lg使用标准的尺寸
- 建议这些将组件的尺寸使用公共的sass变量
- 建议参考社区主流的尺寸
- 考虑移除xs这个尺寸、或都都支持xs
作为一名对自己有要求的前端，差两个像素不能忍
如果业务只使用单个组件，可能看不太出问题，比如 Input 组件的尺寸如下：
- sm 24px
- md 26px
- lg 44px
Search 组件的尺寸如下：
- sm 22px
- md 26px
- lg 42px
当 Input 和 Select 组件单独使用时，可能看不出什么问题，但是一旦把他俩放一块儿，问题就出来了。
大家仔细一看，可以看出中间这个下拉框比两边的输入框和按钮的高度都要小一点。
别跟我说你没看出来！作为一名自身资深的前端，像素眼应该早就该练就啦！
作为一名对自己严格要求的前端，必须 100% 还原设计稿，差两个像素怎么能忍！
vaebe: 表单 size 这个 已经很久了 争取不要留到23年
这时我们的 Maintainer 成员 vaebe 主动承担了该问题的修复工作（必须为 vaebe 同学点赞）。
看着只是一个 Issue，但其实这里面涉及的组件很多。
8月12日，vaebe 同学提了第一个修复该问题的PR：
style(input): input组件的 size 大小
直到12月13日（今天）提交最后一个PR：
cascader组件 props size 在表单内部时应该跟随表单变化
共持续5个月，累计提交34个PR，不仅完美地修复了这个组件尺寸不统一的问题，还完善了相关组件的单元测试，非常专业，必须再次给 vaebe 同学点赞。
关于 vaebe 同学
vaebe 同学是今年4月刚加入我们的开源社区的，一直有在社区持续作出贡献，修复了大量组件的缺陷，完善了组件文档，补充了单元测试，还为 Vue DevUI 组件库新增了 ButtonGroup 组件，是一位非常优秀和专业的开发者。
如果你也对开源感兴趣，欢迎加入我们的开源社区，添加小助手微信：opentiny-official，拉你进我们的技术交流群！
Vue DevUI：https://github.com/DevCloudFE/vue-devui（欢迎点亮 Star 🌟）
--- END ---
我是 Kagol，如果你喜欢我的文章，可以给我点个赞，关注我的掘金账号和公众号 Kagol，一起交流前端技术、一起做开源！
封面图来自B站UP主亿点点不一样的视频：吃毒蘑菇真的能见小人吗？耗时六个月拍下蘑菇的生长和繁殖
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK