javascript - 基于 Svelte 中的变量设置 CSS 类

Question

我正在使用 Svelte 中的自定义组件，我希望能够借助相应的标识符（我称为类型）来设置颜色。例如成功 -> 绿色，错误 -> 红色等。

现在，我正在为每个可以设置为 true 或 false 的“类型”导出一个布尔值，因此可以启用一个具有相同名称或不同名称的类。

let success = false;
let error = false;
let info = false;
let warning = false; 
...
<div
    class:success
    class:error
    class:info
    class:warning >
</div>

这样，用户每次想要更改类型时都必须禁用除其中一种类型之外的所有类型。

有没有办法我可以像这个几乎伪代码一样做类似的事情：D

export let type = "";
...
<div
    class:{type} >
</div>

因此，用户可以按照以下方式使用它。

<custom-comp type={warning} />

标签： javascriptcsssvelte

Answer 1

我自己找到了答案。

我只需要使用：

class="{type}"

代替：

class:{type}