2018-11-02 輪播圖樣式異常-音樂APP

一、問題描述

專案中，圖片是通過QQ音樂的介面獲得的（jsonp）,並且在輪播圖元件中使用插槽，在具體使用輪播圖的元件中對slot進行填充，而後在輪播圖元件中判斷所作出的設定對圖片的樣式進行設定，通過新增類名的方式。而問題的根源在於，圖片的載入是非同步的，在進行DOM操作時，圖片還未載入成功，所以獲取不到圖片們的父元件的子節點，讀取為undefined，無法新增類名。圖片載入成功後，這些DOM節點並未按預計新增樣式，導致了異常樣式的出現。

二、解決思路

在使用輪播圖元件的父元件中，為輪播圖元件設定v-if，判斷圖片載入成功後再使用該元件，此時slot中節點已經可以獲取，成功新增類名。
原本出錯是由於新增v-if的結點錯誤，在slot處填充的結點上新增v-if，此時即使圖片沒有載入，讀取子節點依舊為undefined，並且v-if判斷為true時並不會重複觸發addClass函式。
而加上一句輸出後可以實現是因為修改了函式，熱更新，此時圖片是讀取快取中的，執行函式時圖片已經載入完畢，所以可以實現類名的新增。