Lösung für die Verwendung von JS-definierten Namen als CSS-Variablen in VueJS.

Question

Ich verwende Vuetify, das CSS-Variablen für jede Designfarbe erstellt (wie --v-theme-primary). Ich möchte in der Lage sein, die Farbe in CSS auf --v-theme-{something} zu setzen und den Wert von {something} von JS zu erhalten. Zum Beispiel:

<template>
<div :class="$style['colored-text']">Asd</div>
</template>

<script lang="ts" setup>
const color = ref("primär")
</script>

<style lang="scss" module>
.colored-text {
    Hintergrundfarbe: var(--v-theme-[[v-bind(color)]]);
}
</style>

 [[v-bind(color)]] ist eine ungültige Syntax, ich habe sie nur zur Demonstration aufgerufen. Ich möchte dort den Farbnamen oder etwas aus der Farbreferenz einfügen können, damit ich var(--v-theme-{color}) in CSS verwenden kann, wo die Farbe von JS kommt. Im Beispiel würde es zu var(--v-theme-primary) werden.

Haben Sie irgendwelche Ideen? Ist dieser Ansatz machbar?

Answer 1

你可以为CSS值创建一个计算属性。

你还可以移除 :class="$style['colored-text']"，直接使用 class="colored-text"。

<template>
  <div class="colored-text">Asd</div>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue'
  const color = ref("primary")
  const bgColor = computed(()=>`var(--v-theme-${color}`)
</script>

<style>
.colored-text {
  background-color: v-bind(bgColor);
}
</style>

sfc example