1. 程式人生 > >(vue新手坑)引入Vue元件並改變其樣式

(vue新手坑)引入Vue元件並改變其樣式

遇到的問題

在使用tab元件的時候,要改變tab元件上的文字顏色和滾動條的顏色。這個官網是有介面的,就是這個color。

 Tabs API 
 引數	    說明	    型別	    預設值
 color	  標籤顏色	   String	     #f44

好吧,就修改一下:

  <van-tabs v-model="active"  :color="'#0FAFAA'" >

現在就看到顏色變了:
在這裡插入圖片描述
然後,我以為完事了,直到重新整理的時候看見滾動條在初始的時候還是紅色,然後變成我設定的顏色。嗯。。。。事情果然沒這麼簡單!

解決方法

1、首先是想到了vant可以定製主題

然而試了兩種方法之後,都沒有改變那個0.5秒的紅色,(極有可能是我配置不成功,之後再試吧!)
在github上也看見了配置問題:

https://github.com/youzan/vant/issues/1234
說是precss只能相容2.0.0版本的,照著解決辦法重建一個專案走一遍,結果,呵呵,還是不行,果然是人品不好!

2、只能去github的問題裡面看看了!

在這裡插入圖片描述
這個style加了scoped,樣式就不能覆蓋了,scoped是不能放棄的,這樣會造成全域性汙染, 我只想要這個tab發生改變! 那就只能另外找辦法了!

3、終極解決辦法!

因此對於模板中引入第三方UI框架的樣式如何改寫, 正確方式是寫一個優先順序高於原元件的全域性樣式來覆蓋預設樣式

第一種:

既然加了scoped失效,就寫兩個style,但這種方法不推崇。這裡我是把tab底部的滾動條的背景重置了。
在這裡插入圖片描述

第二種 定義一個全域性的樣式檔案

在assets目錄內新建一個例如resetui.css檔案, (我這裡用的sass)專門存放這些需要被重新修改的樣式程式碼. 並且以元件的類名來進行維護。 最後引入一個全域性resetui.css即可。操作如下圖:
在這裡插入圖片描述

好了!大功告成!