VUE3 中使用 particles-bg-vue粒子动画

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 背景色
bg 是否设置为背景
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
      }
    };
  }