Vue项目中如何向CSS传递多个JS变量（不依赖Web API）

你可以通过绑定包含多个CSS自定义属性的响应式对象来实现需求，无需使用Document API。核心是利用Vue的:style对象绑定语法，将多个动态变量以CSS自定义属性的形式挂载到容器元素上，伪元素通过var()读取这些继承的变量即可。

完整实现代码 #

<template>
  <div class="badge-container" :style="dynamicStyles">
    <slot></slot>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 定义组件接收的props，按需添加需要动态控制的属性
const props = defineProps({
  color: {
    type: String,
    default: '#ff4444'
  },
  size: {
    type: String,
    default: '8px'
  },
  borderRadius: {
    type: String,
    default: '50%'
  }
})

// 用computed生成响应式的样式对象，props变化时自动更新
const dynamicStyles = computed(() => ({
  '--badge-color': props.color,
  '--badge-size': props.size,
  '--badge-radius': props.borderRadius
}))
</script>

<style scoped>
.badge-container {
  /* 容器本身的样式按需定义 */
  position: relative;
  padding-right: 16px;
}

.badge-container::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  /* 读取容器上的CSS自定义属性 */
  background-color: var(--badge-color);
  width: var(--badge-size);
  height: var(--badge-size);
  border-radius: var(--badge-radius);
}
</style>

关键说明 #

1. 样式对象的正确写法：对象的键必须是CSS自定义属性的完整名称（带--前缀），值为动态变量。这种写法比字符串拼接更清晰，也支持多变量。
2. 响应式更新：使用computed包裹样式对象，当传入的props变化时，dynamicStyles会自动更新，伪元素的样式也会同步变化。
3. 伪元素继承变量：容器元素上的CSS自定义属性会被其子元素（包括伪元素）继承，因此::after可以直接通过var()读取这些变量。

如果你之前尝试对象绑定失败，大概率是没有给属性加上--前缀，或者没有用响应式的方式处理样式对象。

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