MUKI AI Summary
最近流行使用 CSS 變數來設計網站主題,方便快速切換顏色。使用 Vue 框架的開發者可以利用 VueUse 套件來修改 CSS Var 變數,這對於需要動態變更樣式的應用特別有用。
VueUse 是由 Anthony Fu 開發的開源專案,提供大量 Vue2 和 Vue3 的實用工具函數,簡化開發流程。可以透過 npm 安裝 @vueuse/core,並使用 useCssVar 來監控和修改 CSS 變數,如調整 Element Plus 框架的 --el-aside-width 變數。...
最近愛上了 CSS 變數,用它來製作網站的主題很方便,要調整成其他顏色的主題也很方便 (直接換 CSS 變數的值即可)
如果有用 Vue 的話,還能使用 VueUse
這個套件,幫你修改 CSS Var
變數唷。
▼ 先來看一下效果
我用的是 Element Plus 框架,在 Element Plus 裡有一個 --el-aside-width
的 CSS 變數,當我展開與收合時,就是利用 JavaScript 控制這個變數,調整他的寬度。
VueUse 套件
什麼是 VueUse
VueUse 是 Anthony Fu 大佬的一個開放原始碼專案,它為 Vue 的開發者提供了大量用於 Vue2 和 Vue3 的基本 Composition API 實用工具函數。
它有幾十個用於常見開發人員用例的解決方案,如跟蹤
ref
更改,檢測元素可見性,簡化常見 Vue 模式,鍵盤 / 滑鼠輸入等。 這是真正節省開發時間的好方法,因為我們不必自己親手新增所有這些標準功能,用就對了(再次感謝大佬的付出)。我喜歡 VueUse 庫,因為它在決定提供哪些實用工具時真正把開發者放在第一位,而且它是一個維護良好的庫,因為它與 Vue 的當前版本保持同步。
https://cloud.tencent.com/developer/article/2023757
安裝 VueUse
$ npm i @vueuse/core
使用 useCssVar core 修改 CSS 變數
官網有詳細的範例與介紹,可以直接參考。或是參考以下我寫的實作 code
我的 Vue 開發環境:TypeScript + script setup 語法糖 + Element Plus
▼ 首先在想要控制的元件上加入 ref 追蹤
<template> <el-aside :collapse="isCollapse" ref="aside"> </el-aside> </template>
▼ import useCssVar
core
<script lang="ts" setup> import { useCssVar } from '@vueuse/core' </script>
▼ 利用 watch
偵測 isCollapse
的改變,然後修改 --el-aside-width
的 value
<script lang="ts" setup> import { ref, watch } from 'vue' import { useCssVar } from '@vueuse/core' const aside = ref(null) const width = useCssVar('--el-aside-width', aside) const isCollapse = ref(true) watch(isCollapse, (newValue) => { if (newValue === false) { width.value = '180px' } else { width.value = '70px' } }) </script>
以上,結束!
使用 JavaScript 修改 CSS 變數
Element Plus 網站有提供原生的 JavaScript 語法,一樣能修改 CSS 變數。
不過我暫時沒有實作成功,但有興趣的朋友也可以參考看看!
// document.documentElement 是全域變數時 const el = document.documentElement // const el = document.getElementById('xxx') // 獲取 css 變數 getComputedStyle(el).getPropertyValue(`--el-color-primary`) // 設定 css 變數 el.style.setProperty('--el-color-primary', 'red')