Svelte彩色纸屑

background

最近在学习 Next.js 时遇到一些挫折，让我挺沮丧的，我看到 HN 上很多人推荐 SvelteKit，说是开发体验更好。 昨天我又从头开始看了下 svelte 的官方 tutorial 教程，不得不说，给我的感觉要好很多。

在官方的示例项目中，我找到了一个有趣的小彩蛋，虽然很简单，但是给我带来了久违的乐趣。

neoconfetti/svelte

@neoconfetti/svelte允许您使用 Svelte 在页面上展示令人惊叹的五彩纸屑爆炸！

demo

<script>
  import { confetti } from '@neoconfetti/svelte'
  import { tick } from 'svelte'

  let success = false

  const action = async (e) => {
    success = false
    await tick()
    success = true
  }
</script>

{#if success}
<div class="confetti" use:confetti />
{/if}

<button type="submit" on:click="{action}">Submit</button>

<style>
  :global(body) {
    overflow: hidden;
  }

  button {
    width: 200px;
  }

  .confetti {
    display: flex;
    margin: 0 auto;
    justify-content: center;
  }
</style>