Penyelesaian untuk menggunakan nama yang ditakrifkan JS sebagai pembolehubah CSS dalam VueJS.

Question

Saya menggunakan Vuetify yang mencipta pembolehubah CSS untuk setiap warna tema (seperti --v-theme-primary). Saya mahu dapat menetapkan warna kepada --v-theme-{something} dalam CSS dan mempunyai nilai {something} datang daripada JS. Contohnya:

warna const = ref("utama")




 [[v-bind(color)]] ialah sintaks tidak sah, saya baru sahaja mengemukakannya untuk demonstrasi. Saya mahu dapat meletakkan nama warna atau sesuatu daripada rujukan warna di sana supaya saya boleh menggunakan var(--v-theme-{color}) dalam CSS di mana warna itu berasal dari JS. Dalam contoh, ia akan menjadi var(--v-theme-primary). 

Adakah anda mempunyai sebarang idea? Adakah pendekatan ini boleh dilaksanakan? 

            

Answer 1

Anda boleh mencipta harta yang dikira untuk nilai CSS.

Anda juga boleh mengalih keluar :class="$style['colored-text']" dan menggunakan class="colored-text" secara terus.

<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 contoh