Google Material Ripple 效果不适用于 Sveltejs

Question

我尝试在我的 SvelteJS 网络应用上试验 Google Material。

经过多次尝试，我终于能够显示按钮，至少如下所示。

现在，我的问题是当我单击按钮时，我没有看到涟漪效应。 但是，当我查看开发工具时，我可以看到涟漪效果至少作为一个类添加到我的按钮中，如下所示。

我关注了Google Material's documentation，包括为按钮应用波纹，但无济于事。

下面是我为 Google Material 实现的 Button.svelte：

<script>
    import { onMount } from 'svelte';
  import {MDCRipple} from '@material/ripple';

  onMount(async () => {
        const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));
    });

</script>

<div class="mdc-touch-target-wrapper">
  <button class="mdc-button mdc-button--raised">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">Contained Button</span>
  </button>
</div>

<style lang="scss">
    @import "./theme-mui.scss";

    .mdc-button {
      padding: 1em 1.2em;
    }
</style>

这也是我的 theme-mui.scss ：

@use "@material/button";
@use "@material/ripple";

@include button.core-styles;

Answer 1

不保证它可以解决您的问题（因为我无法轻松重现），但至少它是一种“更简洁”的解决问题的方法。我们不应该使用document.querySelector，有更好的方法。

我们可以将 HTML 元素绑定到一个局部变量。然后我们可以使用响应式简写在绑定值更新时触发语句

<script>
  import { onMount } from 'svelte';
  import { MDCRipple } from '@material/ripple';

  let button;
  $: MDCRipple.attachTo(button);
</script>

<div class="mdc-touch-target-wrapper">
  <button bind:this={button} class="mdc-button mdc-button--raised">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">Contained Button</span>
  </button>
</div>

现在初始化不在 mount 和它找到的具有该类的每个元素上运行，而是仅在该元素上运行，并且仅在它“存在”时运行。