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

2022-12-14 09:00:14

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