差兩個像素讓我很難受,這問題絕不允許留到明年!

語言: CN / TW / HK

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:https://github.com/DevCloudFE/vue-devui(歡迎點亮 Star 🌟)

--- END ---

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

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

2.png