皮膚開發過程中遇到的3個問題

凌霄光發表於2018-10-11

昨晚在公司沒回去，心血來潮想做完皮膚的需求，發現晚上效率真的是挺高的。

皮膚就是一部分樣式和資源。我的思路是先在原來的元件裡修改對應的樣式，然後把這部分樣式抽出來，單獨管理，同時抽取一些可以配置的變數。

經過一晚上的折騰，現在除了皮膚樣式的單獨打包外，都做完了。做的過程中主要遇到了3個問題：

1. vue的scoped私有模組裡無法覆蓋全域性樣式

vue自帶了scoped的模組化方案，會自動在元素上新增一個隨機的唯一id，然後在選擇器上加上這個id，使得該樣式不會影響其他模組，

這樣是避免了樣式影響別的地方，css modules也是類似的思路，不過css modules是改的class名字，

在改登入頁的時候發現那個elementui的dropdown樣式怎麼也改不了，通過檢視dom發現他是全域性的，在body下，並不在元件裡，而元件的樣式被私有化了，沒法覆蓋全域性。

於是，我在vue單檔案元件里加了兩個style標籤，一個加scoped，一個不加scoped，這樣可以在一個less裡寫私有樣式，一個less裡寫一些可以覆蓋全域性樣式的樣式。

<style lang='less' src='./global-login.less'></style>
<style lang='less' src='./login.less' scoped></style>
複製程式碼

這樣就解決了scoped裡面無法覆蓋全域性樣式的問題。

其實這也是scoped方案不完善的地方，css modules裡是可以在私有模組裡通過 :global(.className)來宣告全域性樣式的，而scoped沒有處理這一點。

2. 圖片的顯示使用背景圖還是圖片標籤

寫樣式遇到圖片的時候，大多數情況下背景圖片和圖片標籤都能解決問題，但兩種方式並不都是合適的。

我覺得如果不需要用js去操作，或者本身只是輔助性的裝飾或說明的圖片，從意義上就是樣式的一部分，應該用背景圖片來做。只有當圖片需要使用js去操作或者有一定的業務含義的時候才有必要用圖片標籤。

此外，這裡要做的皮膚的切換，只是樣式的切換，如果使用圖片標籤來顯示的話，那麼也就沒法只通過樣式來切換皮膚了。

之前的實現都是通過img標籤來做的，無論從程式碼功能用作裝飾還是有業務含義的角度或從皮膚開發只應該修改的角度都得把這裡的標籤改成背景圖的方式。

我把img標籤替換成了div標籤，然後通過不同的class來區分圖示。前後的裝飾圖片使用偽元素 + 背景圖來做的。

把這些無意義的img標籤抽出來之後，html程式碼清爽了很多，而且抽出來的icon樣式複用性也很強。

.icon-suijidianming {
  background-image: url('@{iconsDirPath}/suijidianming.png');
}
.icon-dadishu {
  background-image: url('@{iconsDirPath}/dadishu.png');
}
.icon-fahongbao {
  background-image: url('@{iconsDirPath}/fahongbao.png');
}
複製程式碼