particles-bg-vue 是一個基於VUE的粒子動畫元件。

一、安裝

npm install --save particles-bg-vue

二、使用

<template>
    <div>
      <particles-bg type="fountain" :bg="true" />
    </div>
</template>

<script setup lang='ts'>
import { ParticlesBg } from 'particles-bg-vue'
</script>

引數說明：

<particles-bg color="#ff0000" num=200 type="circle" :bg={true} />
num -每次發射的粒子數，一般不設定
color 背景色
type -是粒子動畫的型別，random是隨機選擇的。你也可以自由定製使用custom，如下
"color"
"ball"
"lines"
"thick"
"circle"
"cobweb"
"polygon"
"square"
"tadpole"
"fountain"
"random"
"custom"

可以使用type="custom "，自由定製

 <particles-bg type="custom" :config="config" :bg="true"/>
  ...

  data: function() {
    return {
      config: {
        num: [4, 7],
        rps: 0.1,
        radius: [5, 40],
        life: [1.5, 3],
        v: [2, 3],
        tha: [-30, 30],
        body: icon,
        alpha: [0.6, 0],
        scale: [0.1, 0.4],
        position: "all",
        cross: "dead",
        random: 15
      }
    };
  }