时间戳

首页 > 解决方案 > 在 Vue.js 中有条件地定位具有 CSS 样式的类

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

问题描述

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

我有一个带有自己的主题系统的应用程序，它允许用户选择自定义的前景色和背景色。然后我想将这些颜色应用于 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，它无法处理间歇性样式，例如活动/悬停状态。

有谁知道更好的方法？

标签： javascriptcssvue.js

解决方案

我从这篇文章中了解到的答案是使用 CSS 变量，它可以通过样式绑定传入。

<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>

推荐阅读