Tajuk ditulis semula sebagai: pembolehubah CSS untuk menambah gaya sebaris dalam Vue

Question

Saya menggunakan pembolehubah css dalam komponen dan tetapkan lebar div berdasarkan data yang dikira dalam persediaan()

setup(props) {
    const progressBar = PositionService.getProgressBar(props.position);
    const progressWidth = `${progressBar}%`;

    ...
    return { ..., progressWidth };
}

Kemudian saya menggunakan pembolehubah ini sebagai pembolehubah css.

<style lang="scss" scoped>
.progress-bar-width {
  --progress-bar-width: v-bind("progressWidth");
  width: var(--progress-bar-width);
}
</style>

Semasa memaparkan halaman, saya perhatikan bahawa gaya sebaris telah ditambahkan pada komponen induk html, menyebabkan

<a href="#/1070/applications/status/1" class="card position-relative border-gray-300 border-hover overflow-hidden h-500px" data-v-61475b35="" style="--61475b35-progressWidth:43.0613%;">.....</a>

CSP menyekat gaya sebaris, jadi kaedah ini tidak akan berfungsi. Bagaimana untuk menggunakan pembolehubah css tanpa gaya sebaris?

Answer 1

Ini adalah penyelesaian yang meretas tetapi memandangkan tiada gaya sebaris, inilah satu-satunya yang boleh saya fikirkan:

Tambah komponen "Gaya" pada templat anda. Ini akan digantikan dengan teg dalam DOM. Di dalam komponen tambahkan pembolehubah CSS yang diperlukan kepada :root

<component :is="`style`">
    :root { --progress-bar-width: {{ progressWidth }}; }
</component>
<div class="progress-bar-width"></div>

<style lang="scss" scoped>
.progress-bar-width {
  width: var(--progress-bar-width);
}
</style>