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:github.com/DevCloudFE/…(欢迎点亮 Star )

— END —

我是 Kagol,假如你喜欢我的文章,可以给我点个赞,关注我的账号和大众号Kagol,一同交流前端技能、一同做开源!

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

差两个像素让我很难过,这问题绝不允许留到下一年!