Vue通过js控制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);
  }
}

<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')
}