Tajuk ditulis semula sebagai: pembolehubah CSS untuk menambah gaya sebaris dalam Vue
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?
