Vue中如何监听CSS根变量变更并获取最新值？

问题根源 #

1. set方法存在语法错误与逻辑缺失：你的setCircleDurationTime方法里，--variable未闭合引号，且没有使用传入的_duration参数，导致CSS变量根本没被正确更新。
2. circleDuration不是响应式数据：你用const circleDuration = getCircleDurationTime()一次性初始化值，后续CSS变量变化时，这个常量不会自动同步更新。
3. v-model绑定错误：模板里v-model="circleDuration "多了空格，会导致绑定失效。

修复步骤与代码示例 #

假设你使用的是Vue框架（从el-input-number和模板语法判断），以下是完整修复方案：

1. 修正模板代码

去掉v-model绑定里的空格：

<template>
  <div class="btnContainer">
    <div>
      {{ circleDuration }}
      <div>Circle Duration Time</div>
      <el-input-number v-model="circleDuration" :min="1" @change="setCircleDurationTime" />
    </div>
  </div>
</template>

2. 修正JS逻辑（Vue3示例）

将circleDuration声明为响应式变量，同时修复set方法的语法与逻辑：

import { ref, onMounted } from 'vue';

// 声明响应式变量
const circleDuration = ref(0);

onMounted(() => {
  // 组件挂载时初始化值
  circleDuration.value = getCircleDurationTime();
});

// 获取CSS变量值，trim()去除多余空格
function getCircleDurationTime() {
  return getComputedStyle(document.documentElement).getPropertyValue('--variable').trim();
}

// 更新CSS变量，并同步响应式变量
function setCircleDurationTime(_duration) {
  // 正确设置根元素的CSS变量
  document.documentElement.style.setProperty('--variable', _duration);
  // 同步更新响应式变量，确保页面显示最新值
  circleDuration.value = _duration;
  // 也可以重新调用get方法验证，确保和CSS变量一致：
  // circleDuration.value = getCircleDurationTime();
}

2. 修正JS逻辑（Vue2示例）

export default {
  data() {
    return {
      circleDuration: 0
    };
  },
  mounted() {
    this.circleDuration = this.getCircleDurationTime();
  },
  methods: {
    getCircleDurationTime() {
      return getComputedStyle(document.documentElement).getPropertyValue('--variable').trim();
    },
    setCircleDurationTime(_duration) {
      document.documentElement.style.setProperty('--variable', _duration);
      this.circleDuration = _duration;
    }
  }
};

关键说明 #

• 必须让circleDuration成为响应式数据（Vue2的data或Vue3的ref/reactive），这样修改后页面才会自动更新显示。
• 更新CSS变量后，需要同步更新响应式变量，或者重新调用getCircleDurationTime()获取最新值，确保数据一致。
• getComputedStyle获取的值可能带有空格，用trim()去除避免显示异常。

内容的提问来源于stack exchange，提问作者celal