Der Titel wird wie folgt umgeschrieben: CSS-Variablen zum Hinzufügen von Inline-Stilen in Vue

Question

Ich verwende CSS-Variablen in der Komponente und stelle die Breite des Div basierend auf den in setup() berechneten Daten ein

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

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

Dann verwende ich diese Variable als CSS-Variable.

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

Beim Rendern der Seite ist mir aufgefallen, dass der übergeordneten HTML-Komponente Inline-Stile hinzugefügt wurden, was zu

führte

<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 blockiert Inline-Stile, daher funktioniert diese Methode nicht. Wie verwende ich CSS-Variablen ohne Inline-Stile?

Answer 1

这是一个黑客解决方案，但由于没有内联样式，这是我唯一能想到的：

向您的模板添加“样式”组件。这将被 DOM 中的 标签替换。在组件内部将所需的 CSS 变量添加到 :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>