Vue使用css變數更換主題色

2021-10-25 18:50:10 字數 863 閱讀 1310

使用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...