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

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：http://github.com/DevCloudFE/vue-devui（歡迎點亮 Star 🌟）

--- END ---

我是 Kagol，如果你喜歡我的文章，可以給我點個贊，關注我的掘金賬號和公眾號 Kagol，一起交流前端技術、一起做開源！

封面圖來自B站UP主億點點不一樣的視訊：吃毒蘑菇真的能見小人嗎？耗時六個月拍下蘑菇的生長和繁殖