时间戳

首页 > 解决方案 > 以编程方式访问一个苗条生成的 CSS 类名？

svelte - 以编程方式访问一个苗条生成的 CSS 类名？

问题描述

我正在使用一个外部库 (@shopify/draggable)，并想告诉 Draggable 当前组件中可拖动 CSS 类的名称是什么。

onMount(() => {
    const droppable = new Droppable(containers, {
      draggable: ".draggable",
      dropzone: ".dropzone",
    });
});

在其他地方，我定义了一种.draggable风格：

<style>
    .draggable { ... }
</style>

我知道我可以使用:global(.draggable)CSS 选择器告诉 Svelte CSS 类名称是全局的，但是有没有办法反过来，并询问 Svelte 它将把本地draggableCSS 类重命名为曾经是全局的什么？例如svelte-a57ab？

标签： sveltesvelte-3

解决方案

Svelte 不会重命名可拖动类——它仍然会出现在您的标记中。它只会添加一个额外的svelte-xxxxx类来限定样式，因此您可以继续使用.draggable选择器。

但是，如果您确实需要访问 Svelte CSS 类，您可以自己实现它。没有内置的 Svelte API 来执行此操作，但您可以通过检查元素的类列表来检索它。您需要首先使用获取对可拖动 DOM 节点的引用，然后在函数中bind:this从其检索 CSS 类。这是从标题中检索 CSS 类的示例。classListonMount

<script>
    import { onMount } from 'svelte';
    let heading;
    let svelteClass = '';
    
    onMount(() => {
        svelteClass = Array.from(heading.classList).filter(c => c.includes('svelte-'))[0];
    })
</script>

<style>
    h1 {
        color: red;
    }
</style>

<h1 bind:this={heading}>Hello world!</h1>
<div>
    {svelteClass}
</div>

svelte-xxxxx请注意，如果您已将样式应用于节点，则只会有一个类。

推荐阅读