css 有没有一种好的方法来设计HTML元素的样式，并在Svelte组件中重新公开它们的所有事件？

holgip5t 于 2023-05-19 发布在其他

关注(0)|答案(2)|浏览(182)

如何在Svelte组件中对HTML元素进行样式化并重新公开它们的所有事件？（本质上，我正在寻找执行styled-components的Svelte方式）
例如，我尝试对一个常规的HTML button进行样式化，并将其公开为一个可重用组件：

<script>
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();
</script>

<button
  on:click={() => dispatch("click")}
  on:mouseover={() => dispatch("mouseover")}
  {/* ...and so on for every other event */}
>
  <slot />
</button>

<style>
  button {
    /* ... */
  }
</style>

有没有什么方法可以避免让button HTML元素上的每个事件都调用dispatch来通过父元素传播事件？有更简单的方法吗？
我试过搜索，大多数地方都让我只使用CSS-in-JS，但我不想放弃所有的优化，让我的风格完全用Svelte写（更小的包大小，更好的性能，等等）。

css

来源：https://stackoverflow.com/questions/76270665/is-there-a-good-way-to-style-html-elements-and-re-expose-all-of-their-events-in

2条答案

按热度按时间

xzlaal3s1#

您可以通过列出事件来转发它们，而不需要 * 事件处理程序：

<button {...$$restProps} on:click on:focus on:hover ...>

不需要调度，但目前无法自动转发 * 所有 * 事件，仍需列出。（Issue on that）
属性通过$$restProps传递，其中包括所有未显式定义的属性（不是事件）。（文件）

赞(0）回复(0）举报 2023-05-19

rsl1atfo2#

您可以使用**$$restProps对象**将按钮的所有事件和属性传递给组件：

脚本

<script>
  import { createEventDispatcher } from "svelte";

  const dispatch = createEventDispatcher();

  export let $$restProps;
</script>

<button on:click={() => dispatch("click")} {...$$restProps}>
<slot />

造型

<style>
  button {
    /* ... */
  }
</style>

然后像这样使用该组件：

<StyledButton class="my-button" on:click={() => console.log("clicked!")}>
  Click me!
</StyledButton>

赞(0）回复(0）举报 2023-05-19

我来回答

css 有没有一种好的方法来设计HTML元素的样式，并在Svelte组件中重新公开它们的所有事件？

2条答案

相关问题

热门标签

最新问答