fireworks-js

1
<template>
2
  <div class="buttons">
3
    <button @click="mounted = !mounted">
4
      {{ mounted ? 'Mounted' : 'Unmounted' }}
5
    </button>
6
    <button @click="startFireworks">Start</button>
7
  </div>
8
  <Fireworks
9
    ref="fw"
10
    v-if="mounted"
11
    :autostart="false"
12
    :options="options"
13
    :style="{
14
      top: 0,
15
      left: 0,
16
      width: '100%',
17
      height: '100%',
18
      position: 'fixed',
19
      background: '#000'
20
    }"
21
  />
22
</template>
23

24
<script lang="ts" setup>
25
import { Fireworks } from '@fireworks-js/vue'
26
import { ref, watch } from 'vue'
27
import type { FireworksOptions } from '@fireworks-js/vue'
28

29
const fw = ref<InstanceType<typeof Fireworks>>()
30
const options = ref<FireworksOptions>({ opacity: 0.5 })
31
const mounted = ref(true)
32

33
async function startFireworks() {
34
  if (!fw.value) return
35
  fw.value.start()
36
  await new Promise((resolve) => setTimeout(resolve, 1000))
37
  await fw.value.waitStop()
38
}
39

40
watch(fw, () => startFireworks())
41
</script>
42

43
<style>
44
body {
45
  background-color: #000;
46
}
47

48
.buttons {
49
  z-index: 1;
50
  position: absolute;
51
  display: flex;
52
  gap: 4px;
53
}
54
</style>
55