Vue通過js控制css變量一鍵修改全局樣式的完整過程

更新時間：2025年05月20日 10:38:44 投稿：daisy

這篇文章主要介紹了Vue通過js控制css變量一鍵修改全局樣式的完整過程,結合ElementUI、vuex和cookie保存用戶設置,確保表格字體隨滾動條變化且新頁面同步生效,提升樣式維護靈活性,需要的朋友可以參考下

背景

最近接到一個需求：在Vue（版本是2.x）頁面有個控制字體大小的選項，修改后全局表格內的字體會變化，且要新打開的頁面也會變化。

需求整理

在頁面上方設置一個修改布局大小的選項
點擊后會出現滾動條，字體范圍為9到23px，默認值為14px
拖動字體滾動條時，頁面表格字體會隨著滾動條值的變化而變化
用戶每次打開頁面時會讀取上次設置的字體大小

實現效果如圖：

本文章會記錄完成這個需求的思考過程，如果需要直接看代碼請拉至"代碼實現"章節(jié)。

系統(tǒng)現狀

技術框架：vue2+ElementUI，基于若依管理系統(tǒng)的二次開發(fā)系統(tǒng)

實現思路

ElementUI有個控制全局大小的size變量，只要使用的控件不添加size屬性，就會讀取全局的size變量進行相應大小的展示。
- 但該設置只能設置為預設的4種大小（default，meduim，small，mini）無法滿足需求中的設置字體大小為指定像素（px）。
通過修改全局樣式scss樣式文件，需要在每個class聲明fontSize樣式

由上述思考后，決定采用方法2，但如果我用js每次都更新一大堆class中的fontSize，那太痛苦了，如果使用到的class中fontSize屬性能動態(tài)讀取同一個變量，用戶修改該變量的值后引用該變量的class值都能改變，那我只用js修改一個變量即可，那有沒有這種方法呢？

css如何讀取某個變量

CSS變量（也稱為 CSS 自定義屬性）允許你在 CSS 中定義可重用的值。具體特點如下：

定義：通過 -- 前綴命名，在 :root 或其他選擇器（如其他的class）中定義。
使用：通過 var() 函數在 CSS 屬性值中引用。
作用：提高樣式的可維護性和一致性，便于全局修改樣式。

/* 可由js控制的css傳參*/
:root {
  --table-font-size: 14px;
  --ux-grid-height: 31px;
}
/* 使用var引用--table-font-size和--ux-grid-height變量，后文的ux-grid使用了.elx-table樣式類*/
.elx-table.size--default {
  font-size: var(--table-font-size);
  height: var(--ux-grid-height);
  padding-top: 2px;
  /* 使用var引用--table-font-size變量*/
  .el-button {
    font-size: var(--table-font-size);
    /* 結合calc和min函數一起使用*/
    padding-top: min(calc(var(--ux-grid-height) - var(--table-font-size) - 13px), 20px);
  }
}

既然css已經提供了這種方法，那么最后一個小需求實現起來就更容易了：每次修改字體大小時觸發(fā)值改變事件，修改字體大小后將值保存在cookie和vuex中，用戶每次登陸時獲取cookie中的值，如果沒有值則默認取:root的大小。

代碼實現

<template>
  <el-tooltip content="調整字體" effect="dark" placement="bottom">
    <el-popover class="right-menu-item hover-effect"
      placement="bottom"
      width="200"
      trigger="click">
        <el-slider :min="9" :max="23" v-model="fontSize" :format-tooltip="(value)=>value + '像素'" @change="changeFontSize"></el-slider>
        <i slot="reference" class="el-icon-s-operation"></i>
    </el-popover>
  </el-tooltip>
</template>

created() {
  this.fontSize = parseFloat(this.$store.state.app.tableFontSize)
  this.updateCssSize(CSS_FONT_SIZE_NAME, this.fontSize)
},
data() {
  return {
    fontSize: 0
  }
},
/**
 * 值變化事件
 */
methods: {
  /** 修改字體大小事件*/
  changeFontSize(amount) {
    this.updateCssSize(CSS_FONT_SIZE_NAME, amount)
    // 保存到vuex中
    this.$store.dispatch('app/setTableFontSize', amount)
    // 表格的行高為fontSize+17，讓行高隨著字體的變化而變化
    let uxGridHeight = '--ux-grid-height'
    this.updateCssSize(uxGridHeight, amount + 17)
    this.refreshView()
  },
  /** 修改樣式屬性值 */
  updateCssSize(prop, value) {
    const newVal = parseFloat(value)
    document.documentElement.style.setProperty(prop, newVal  + 'px');
  },
  /** 重新加載已打開的其他標簽頁*/
  refreshView() {
    this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
    const { fullPath } = this.$route
    this.$nextTick(() => {
      this.$router.replace({
        path: '/redirect' + fullPath
      })
    })
  }
}

// 在vuex中的代碼
const mutations = {
  TOGGLE_SIDEBAR: state => {
    SET_TABLE_FONT_SIZE: (state, fontSize) => {
      state.tableFontSize = fontSize
      Cookies.set('tableFontSize', fontSize)
    }
  }
}

// 在app.js中的代碼
const state = {
  tableFontSize: Cookies.get('tableFontSize') || window.getComputedStyle(document.documentElement).getPropertyValue('--table-font-size')
}