Vue 2 中动态设置 CSS 变量（也称为自定义属性）

在 Vue 2 中，可以通过几种方法动态设置 CSS 变量（也称为自定义属性）。以下是实现这一功能的几种常见方式：

方法1：使用内联样式绑定 :style

这是最直接的方法之一。你可以在组件的模板中直接绑定:style属性，并将CSS变量作为对象或字符串传递。

<template>
  <div :style="dynamicStyles">
    动态样式内容
  </div>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: '#42b983' // 默认颜色
    }
  },
  computed: {
    dynamicStyles() {
      return {
        '--primary-color': this.primaryColor // 将数据绑定到CSS变量
      };
    }
  }
}
</script>

<style scoped>
div {
  color: var(--primary-color); /* 使用CSS变量 */
}
</style>

方法2：使用 <style> 标签中的 JavaScript 表达式

Vue 2 支持在 <style> 标签中使用 JavaScript 表达式来动态设置全局或局部的CSS变量。这需要使用 v-bind 指令和 :style 的语法糖。

<template>
  <div>
    动态样式内容
  </div>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: '#42b983'
    }
  }
}
</script>

<style scoped>
:root {
  --primary-color: v-bind(primaryColor); /* 绑定到data中的变量 */
}

div {
  color: var(--primary-color);
}
</style>

注意：这种方法实际上并不适用于 Vue 2，因为它是在 Vue 3 引入的特性。如果你尝试在 Vue 2 中这样做，它不会按照预期工作。因此，推荐使用第一种方法或者下面介绍的方法。

方法3：通过 JavaScript 修改 :root 或特定元素的样式

你可以通过JavaScript直接修改文档的根元素或特定元素上的CSS变量。这种方式适合在某些情况下动态更新全局或局部的样式。

<template>
  <div ref="dynamicElement">
    动态样式内容
  </div>
</template>

<script>
export default {
  data() {
    return {
      primaryColor: '#42b983'
    }
  },
  mounted() {
    this.updateDynamicStyles();
  },
  watch: {
    primaryColor(newValue) {
      this.updateDynamicStyles(newValue);
    }
  },
  methods: {
    updateDynamicStyles(color = this.primaryColor) {
      this.$refs.dynamicElement.style.setProperty('--primary-color', color);
    }
  }
}
</script>

<style scoped>
div {
  color: var(--primary-color, #000); /* 设置默认值 */
}
</style>

方法4：使用 provide / inject 实现跨组件通信

如果你想在多个子组件之间共享和动态更新CSS变量，可以考虑使用 Vue 的 provide 和 inject 选项。这允许你在父组件中提供一个响应式的CSS变量，并在所有子组件中注入和使用它。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      primaryColor: this.primaryColor
    };
  },
  data() {
    return {
      primaryColor: '#42b983'
    };
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div :style="dynamicStyles">
    子组件内容
  </div>
</template>

<script>
export default {
  inject: ['primaryColor'],
  computed: {
    dynamicStyles() {
      return {
        '--primary-color': this.primaryColor
      };
    }
  }
};
</script>

<style scoped>
div {
  color: var(--primary-color);
}
</style>

总结

• 内联样式绑定 是最简单且常用的方式。
• 通过 JavaScript 修改样式 适合更复杂的场景，比如需要在特定事件触发时更新样式。
• provide / inject 有助于构建可维护的应用程序结构，特别是在有多个层级的组件树中共享状态时。

选择哪种方法取决于你的具体需求和应用的复杂度。希望这些方法能帮助你在 Vue 2 项目中成功实现动态设置 CSS 变量。