2022年8月8日,linxiang07 同学给咱们的 Vue DevUI 提了一个 Issue:
#1199 Button/Search/Input/Select等反对设置size的组件规范不对立,并且认真梳理了现有反对size属性的组件列表和每个组件大中小尺寸的现状,整顿了一个表格(能够说是提 Issue 的榜样,值得学习)。

不仅如此,linxiang 同学还提供了具体的批改倡议:

  1. 倡议xs、 sm 、md、lg应用规范的尺寸
  2. 倡议这些将组件的尺寸应用公共的sass变量
  3. 倡议参考社区支流的尺寸
  4. 思考移除xs这个尺寸、或都都反对xs

作为一名对本人有要求的前端,差两个像素不能忍

如果业务只应用单个组件,可能看不太出问题,比方 Input 组件的尺寸如下:

  • sm 24px
  • md 26px
  • lg 44px

Select 组件的尺寸如下:

  • 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月刚退出咱们的开源社区的,始终有在社区继续作出贡献,修复了大量组件的缺点,欠缺了组件文档,补充了单元测试,还为咱们新增了 ButtonGroup 组件,是一位十分优良和业余的开发者。

如果你也对开源感兴趣,欢送退出咱们的开源社区,增加小助手微信:opentiny-official,拉你进咱们的技术交换群!

Vue DevUI:https://github.com/DevCloudFE/vue-devui(欢送点亮 Star )

--- END ---

我是 Kagol,如果你喜爱我的文章,能够给我点个赞,关注我的掘金账号和公众号 Kagol,一起交换前端技术、一起做开源!

封面图来自B站UP主亿点点不一样的视频:吃毒蘑菇真的能见君子吗?耗时六个月拍下蘑菇的成长和滋生