問題:使用vue的第三方元件庫(element-ui、antdv)時有時候需要進行區域性樣式調整,使用 /deep/ 進行全域性樣式調整很容易,那麼區域性樣式調整如何實現呢?
1、在vue元件中,在style標籤中新增scoped屬性,這樣在這裡定義的css只作用於當前元件中的元素,可使元件之間的樣式不會相互汙染,使樣式私有化。比如在父元件內使用子元件,父元件的樣式不會滲透到子元件中。2、在加上scoped後,會為dom節點自動新增乙個唯一的屬性(data-v-f3f3eg9後面這串數字像是獨一無二的hash值),以保證其唯一性。同時在相應的css選擇器末尾,也加上了當前元件的data-v-f3f3eg9屬性,來使其私有化。
轉化後:
使用了scoped後,儘管實現元件樣式的私有化,但在我們實際的專案中,在很多地方使用重複的子元件或其他的樣式庫時,在個別地方需要微調樣式,這個時候不能直接改子元件樣式,而且在父元件裡的樣式又不能滲透到子元件去。這個時候文件中有一句話:
不過乙個子元件的根節點會同時受其父元件的 scoped css 和子元件的 scoped css 的影響。這樣設計是為了讓父元件可以從布局的角度出發,調整其子元件根元素的樣式。所以還是有辦法解決剛才那個問題的,當我們希望 scoped 樣式中的乙個選擇器能夠作用得「更深」,例如影響子元件,你可以使用 >>> 操作符,編譯後會在相應的選擇器後面增加獨有的屬性(修改第三方標籤樣式是父標籤包含第三方需要修改的子標籤);如下:上述**將會編譯成:在這裡需要注意的是,有些像 sass 、scss之類的預處理器無法正確解析 >>>。這種情況下我們可以使用 /deep/ 或 ::v-deep 操作符來取代》,在style加上 lang='scss' 表示這是 scss 預處理器,這是兩個都是 >>> 的別名,同樣可以正常工作。如下:.a[data-v-f3f3eg9] .b
這樣就可以針對第三方的元件庫進行區域性樣式調整了第三方元件預設樣式如何修改
當在vue檔案下寫樣式時,為了避免與其他元件樣式汙染,在style標籤上加乙個scoped屬性,但這時,如果想要修改第三方外掛程式的樣式,則會沒有效果。推薦採用以下方案 vue樣式穿透 sass less使用樣式穿透的方式 parent deep childrenstylus的樣式穿透 使用 par...
Vue scoped與覆蓋第三方元件樣式
vue中有很多第三方的ui庫如 elementui iview等,樣式豐富且使用起來很方便,但在真實的使用場景中,我們可能需要在某些地方修改第三方元件的樣式,但是通過傳統方式,修改卻不生效,以下是對於vue scoped的理解,和如何覆蓋第三方元件樣式的總結。1.什麼是scoped?2.如何覆蓋修改...
解決VUE元件內不能更改第三方外掛程式樣式
深度作用選擇器 嚴格來說,這個應該是vue loader的功能。vue loader 12.2.0 在專案開發中,如果業務比較複雜,特別像中颱或b端功能頁面都不可避免的會用到第三方元件庫,產品有時會想對這些元件進行一些ui方面的定製。如果這些元件採用的是有作用域的css,父元件想要定製第三方元件的樣...