javascript - 在 Vue.js 中有条件地定位具有 CSS 样式的类

Question

关于如何有条件地向元素添加类，或如何有条件地向元素添加样式，这里有几个问题有很好的答案，但我想做的是有条件地设置类的样式。

我有一个应用程序，它有自己的主题系统，允许用户选择自定义前景色和背景色。然后我想将这些颜色应用于 quill.js 工具栏按钮。如果我提前知道颜色，我可以在我的样式中添加类似的东西。

.ql-toolbar .ql-stroke {
    stroke: #f00;
}

我什至可以选择在我的容器上抛出一个条件类，并在我的模板中有多个子样式。

.ql-container.foo {
    .ql-toolbar .ql-stroke {
        stroke: #f00;
    }
}
.ql-container.bar {
    .ql-toolbar .ql-stroke {
        stroke: #b4c;
    }
}

但由于用户可以选择任何 rgb 颜色，我不能这样做。

我也试过将样式标签写入组件模板，但是在尝试编译时失败了。

现在，为了让事情正常进行，我减少了使用 document.querySelector 来访问工具栏并在用户颜色设置更改时更改每个按钮 svg 元素的属性。这是一个丑陋的 hack，它无法处理间歇性样式，例如事件/悬停状态。

有没有人知道更好的方法？

Answer 1

答案，我从this post学到的，就是使用CSS变量，可以通过样式绑定(bind)传入。

<template>
   <div class="container" v-bind:style="{'--toolbarColor': toolbarColor}">
      <!-- quill goes here -->
   </div>
</template>

<style>
    .ql-toolbar {
        background-color: var(--toolbarColor) !important;
    }
</style>

<script>
    export default {
        computed: {
            toolbarColor() {
                return '#f00';
            }
        }
    }

</script>