Apakah ada cara untuk mendefinisikan properti pemilih css secara dinamis?

Misalnya bagaimana cara mendefinisikan properti "warna" dari pemilih ".some-style" dengan nilai yang didapat dari server backend?

<style>
    .some-style {
        color: #ffc050;
    }
</style>
0
Zurab-D 19 November 2020, 16:58

1 menjawab

Jawaban Terbaik
  1. Buat style dinamis di elemen teratas di template Anda.
  2. Tetapkan respons backend properti Anda ke fungsi yang dihitung.
  3. Setel style lang ke lang='scss' lalu gunakan fungsi varialbe CSS var() untuk menyetel nilainya.

Contoh

<template>
    <div :style="cssProps">
        <div class="some-style">
            Hello Mars
        </div>
    </div>
</template>

<script>
export default {
computed: {
    cssProps() {
        // backend response with your css values
        let backendResponseObject = {
            fontColor: "black", // you can use rgb or hex
            backgroundColor: "White" // you can use rgb or hex
        }

        properties = {
            "--brand-base": backendResponseObject.color,
            "--brand-primary": backgroundColor.hex,
        };

        return properties;
    }
}
}
</script>

<style lang="scss">
.some-style {
    color: var(--brand-base);
    background: var(--brand-primary);
}
</style>
1
Simo D'lo Mafuxwana 19 November 2020, 14:38