1
1
<template >
2
- <div :id =" id" ></div >
2
+ <div :id =" id" ></div >
3
3
</template >
4
4
5
5
<script setup lang="ts">
@@ -11,66 +11,66 @@ export type IParticlesProps = ISourceOptions;
11
11
let container: Container | undefined , engine: Engine | undefined ;
12
12
13
13
const props = defineProps <{
14
- id: string ;
15
- options? : IParticlesProps ;
16
- url? : string ;
17
- theme? : string ;
14
+ id: string ;
15
+ options? : IParticlesProps ;
16
+ url? : string ;
17
+ theme? : string ;
18
18
}>();
19
19
20
20
const emit = defineEmits <{
21
- (e : " particlesLoaded" , container ? : Container ): void ;
21
+ (e : " particlesLoaded" , container ? : Container ): void ;
22
22
}>();
23
23
24
24
const initEventHandler = (e : Event ) => {
25
- const evt = e as CustomEvent <Engine >;
25
+ const evt = e as CustomEvent <Engine >;
26
26
27
- engine = evt .detail ;
27
+ engine = evt .detail ;
28
28
29
- loadParticles ();
29
+ loadParticles ();
30
30
};
31
31
32
32
addEventListener (" particlesInit" , initEventHandler );
33
33
34
34
const loadParticles = async () => {
35
- if (! engine ) {
36
- engine = tsParticles ;
37
- }
35
+ if (! engine ) {
36
+ engine = tsParticles ;
37
+ }
38
38
39
- container = await engine .load ({
40
- id: props .id ,
41
- url: props .url ,
42
- options: props .options ,
43
- });
39
+ container = await engine .load ({
40
+ id: props .id ,
41
+ url: props .url ,
42
+ options: props .options ,
43
+ });
44
44
45
- emit (" particlesLoaded" , container );
45
+ emit (" particlesLoaded" , container );
46
46
};
47
47
48
48
onMounted (() => {
49
- nextTick (() => {
50
- if (! props .id ) {
51
- throw new Error (" Prop 'id' is required!" );
52
- }
49
+ nextTick (() => {
50
+ if (! props .id ) {
51
+ throw new Error (" Prop 'id' is required!" );
52
+ }
53
53
54
- loadParticles ();
55
- });
54
+ loadParticles ();
55
+ });
56
56
});
57
57
58
58
onUnmounted (() => {
59
- if (! container ) {
60
- return ;
61
- }
59
+ if (! container ) {
60
+ return ;
61
+ }
62
62
63
- container .destroy ();
63
+ container .destroy ();
64
64
65
- container = undefined ;
65
+ container = undefined ;
66
66
67
- removeEventListener (" particlesInit" , initEventHandler );
67
+ removeEventListener (" particlesInit" , initEventHandler );
68
68
});
69
69
70
70
watch (
71
71
() => props .theme ,
72
72
() => {
73
- container ?.loadTheme (props .theme );
73
+ container ?.loadTheme (props .theme );
74
74
},
75
75
{ immediate: true , deep: true },
76
76
);
0 commit comments