Ant Designer Vue 中 layout 樣式類名丟失的原因分析


現象

我是在 2.0.1 上發現的這個問題:

<a-layout-sider /> 渲染到頁面上會變成 <section class="undefined-has-sider"> 丟失了 layout 前綴

問題分析

排查了源碼,看了下 antd 的文件結構,發現其大體上是按組件模塊分類

那么 layout 組件自然就在 layout 文件夾下了。

定位到 layout.js 下的 generator 方法,下面是該方法的源碼截圖:

注意第 68 行到 72 行這塊代碼,不難理解這里做的是屬性合並,問題就出在了 _extends 這個工具方法,同樣看下該方法的源碼:

方法不難解讀,當瀏覽器支持 Object.assign 的時候,優先使用該方法進行屬性合並。

但是, Object.assign 最大的問題“無腦”合並,即后面的對象字段即使是 undefined 也是會覆蓋前面的屬性的。

這也是出現這個問題的關鍵。

下面的截圖是我在瀏覽器里斷點的時候,將 68 行到 72 行代碼分開執行的結果:

layoutundefined 無情的覆蓋了

后記

我試了下 2.1.2,還是沒有修復該問題,然后安裝了 2.2.0-beta.2 該問題修復了。

看更新日志,其中在 2.2.0-beta.1 里有這么一條

本版本重構組件 Anchor、Alert、Avatar、Badge、BackTop、Col、Form、Layout、Menu、Space、Spin、Switch、Row、Result、Rate

然后看了下源碼,那段有問題的代碼的確重寫了,現在改成這樣了

調整了合並屬性的順序。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM