是否可以在同一个 page/component 上选择两个不同设计的 类？

Question

Svelte 有很好的 tool 用于定义 类 的设计，但是是否可以在一个组件中定义两个不同的 类？
我正在处理菜单，它位于一个组件中。重新加载页面时，我需要 'selected' 两个按钮，一个来自主菜单，第二个来自子菜单，但似乎即使 类 具有不同的名称和变量，它也只会激活一个其中 - 第一个。是否可以在一个组件中同时 select 更多 classes/active-buttons？

Answer 1

您可以在同一组件中、不同元素上使用多个 class: 指令，也可以在单个元素上多次使用。

在单个元素上，您可以使用 class= 属性混合和匹配多个 class: 指令。 Svelte 将合并结果。

如以下代码（和REPL）所示，所有这些都受支持：

<script>
    let name = 'world';
    
    let red = false
    let underline = false
    let align = "left"
</script>

<p>
    <label class:selected={red}>
        <input type="checkbox" bind:checked={red} />
        Red
    </label>
</p>

<p>
    <label class:selected={underline}>
        <input type="checkbox" bind:checked={underline} />
        Underline
    </label>
</p>

<p>
    Align
    <label class:selected={align === "left"}>
        <input type="radio" value="left" bind:group={align} />
        left
    </label>
    <label class:selected={align === "center"}>
        <input type="radio" value="center" bind:group={align} />
        center
    </label>
    <label class:selected={align === "right"}>
        <input type="radio" value="right" bind:group={align} />
        right
    </label>
</p>

<h1 
        class="align-{align}"
        class:red
        class:underline
>
    Hello {name}!
</h1>

<style>
    .red {
        color: red;
    }
    
    .underline {
        text-decoration: underline;
    }
    
    .align-left {
        text-align: left;
    }
    .align-center {
        text-align: center;
    }
    .align-right {
        text-align: right;
    }
    
    label {
        padding: .5em .5em .25em;
    }
    label.selected {
        background: lavender;
    }
</style>

具有多个 class 指令并与 class 属性混合的单个元素：

<h1 
        class="align-{align}"
        class:red
        class:underline
>
    Hello {name}!
</h1>

在多个元素上使用相同的 class (selected):

<p>
    <label class:selected={red}>
        <input type="checkbox" bind:checked={red} />
        Red
    </label>
</p>

<p>
    <label class:selected={underline}>
        <input type="checkbox" bind:checked={underline} />
        Underline
    </label>
</p>

你的情况肯定有其他问题（或者我没听懂你的问题）。