使用css變數更換主題色。
一般會提供幾個主題色供使用者選擇,或者直接使用拾色器讓使用者選擇喜歡的顏色。
宣告乙個自定義屬性,屬性名需要以兩個減號(–)開始,屬性值則可以是任何有效的css值。和其他屬性一樣,自定義屬性也是寫在規則集之內的,如下:
element
注意,規則集所指定的選擇器定義了自定義屬性的可見作用域。通常的最佳實踐是定義在根偽類 :root 下,這樣就可以在html文件的任何地方訪問到它了:
:root
使用方法,如前所述,使用乙個區域性變數時用 var() 函式包裹以表示乙個合法的屬性值:
element
首先在data中定義乙個樣式物件
data()
,}}
在template 中繫結樣式
>
"tabscourselist"
class
="tabs-course-list"
:style
="styleobj
">
div>
template
>
顏色變化給變數賦值即可,我這裡是props 傳進來的,所以使用watch監聽了一下
watch:
, deep:
true}}
,
在css中使用該變數即可
.li-head
以上即可實現通過css變數更換主題色。 element ui更換主題色
1 cd到你的專案檔案目錄下,npm i element theme g 2 npm i element theme default d 3 et i 執行後當前目錄會有乙個element variables.css檔案 4 直接編輯element variables.css檔案,修改變數 例如主題...
Vue中如何使用sass實現換膚 更換主題 功能
原理 通過設定html的attribute屬性在封裝的函式中進行判斷,進行相應的設定不同的顏色 css中 可以識別到在html標籤上設定的屬性,所以在html上對應屬性發生變化時,就會執行相應的樣式,這一步有點類似於平時給div新增乙個.active屬性,css自動執行相應樣式。1.首先切換的樣式檔...
vue專案中更改element主題色
全域性安裝element theme cnpm i element theme g專案中安裝element theme chalk cnpm i element theme chalk d生成初始化檔案element variables.scss et i注意 若專案中未使用scss需先安裝sass...