JavaScript, Vue

2022.11.25

用 JavaScript / VueUse 套件 修改 CSS Var 變數

最近愛上了 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

VueUse

VueUse

Collection of essential Vue Composition Utilities

我的 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')

歡迎給我點鼓勵,讓我知道你來過 :)


更多 Vue 相關文章

guest

0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.