particles 粒子背景插件在vue3中的使用

概述

npm 链接 https://www.npmjs.com/package/particles.vue3

GitHub地址 https://github.com/tsparticles/vue3

配置参数说明：

• color: String类型 默认’#dedede’。粒子颜色。
• particleOpacity: Number类型 默认0.7。粒子透明度。
• particlesNumber: Number类型 默认80。粒子数量。
• shapeType: String类型 默认’circle’， 可用的粒子外观类型有：“circle”,“edge”,“triangle”, “polygon”,“star”。
• particleSize: Number类型 默认80。单个粒子大小。
• linesColor: String类型 默认’#dedede’。线条颜色。
• linesWidth: Number类型 默认1。线条宽度。
• lineLinked: 布尔类型 默认true。连接线是否可用。
• lineOpacity: Number类型 默认0.4。线条透明度。
• linesDistance: Number类型 默认150。线条距离。
• moveSpeed: Number类型 默认3。粒子运动速度。
• hoverEffect: 布尔类型 默认true。是否有hover特效。
• hoverMode: String类型 默认true。可用的hover模式有: “grab”, “repulse”, “bubble”。
• clickEffect: 布尔类型 默认true。是否有click特效。
• clickMode: String类型 默认true。可用的click模式有: “push”, “remove”, “repulse”, “bubble”。

使用

实现效果（颜色可以自己调哈）：

1. 安装 particles

# 使用npm安装 
npm install particles.vue3 --save 
# 使用yarn安装 
yarn add particles.vue3 --save 

2. 安装 tsparticles-slim

# 使用TS还需安装，如果安装完还是报错找不到该模块，可以重启一下项目 
npm i tsparticles

3. 页面挂载（main.js中）

import Particles from "particles.vue3"; 
app.use(Particles)
app.mount('#app')

4. view中的粒子特效配置（粒子options）

// 粒子参数
const options = ref({
  background: {
    color: {
      value: '#4facfe'
    }
  },
  // backgroundColor:'#000000',
  fpsLimit: 120,
  interactivity: { // 交互性
    events: { // 事件 
      onClick: { // 1.点击
        enable: true,
        mode: 'push' // "push", "remove", "repulse", "bubble"
      },
      onHover: { // 2.悬停
        enable: true,
        mode: 'grab'  // "grab"(磁吸), "repulse"(排斥), "bubble"(气泡)
      },
      resize: true //调整大小
    },
    modes: {
      // 气泡
      bubble: {
        distance: 400,
        duration: 2, //持续时间
        opacity: 0.8,
        size: 40
      },
      // 推
      push: {
        quantity: 4 //数量
      },
      // 排斥
      repulse: {
        distance: 200,
        duration: 0.4
      }
    }
  },
  // 粒子
  particles: {
    color: {
      value: '#ffffff'
    },
    // 是否用直线连接起来
    links: {
      color: '#ffffff',
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1
    },
    // 碰撞
    collisions: {
      enable: true
    },
    // 移动
    move: {
      direction: 'none',
      enable: true,
      // 输出模式
      outModes: {
        default: 'bounce' //弹跳
      },
      random: false, //是否随机
      speed: 4, // 速度
      straight: false //是否直线
    },
    number: {
      // 密度 用value值除以区域值
      density: {
        enable: true,
        area: 1000
      },
      value: 80
    },
    opacity: {
      value: 0.5
    },
    // 形状
    shape: {
      type: 'circle'
    },
    size: {
      value: { min: 1, max: 5 },
    }
  },
  detectRetina: true
}
)

5. 粒子特效初始化加载的两个方法

const particlesInit = async engine => {
    //await loadFull(engine);
    await loadSlim(engine);
};

const particlesLoaded = async container => {
    console.log("Particles container loaded", container);
}

6. 页面粒子背景组件使用

<vue-particles id="tsparticles" 
  :particlesInit="particlesInit" 
  :particlesLoaded="particlesLoaded"
  :options="options" />

完整代码

链接: https://pan.baidu.com/s/1OxZ2XB8ArjQUwGp3SoIqTQ 提取码: n3pe 复制这段内容后打开百度网盘手机App，操作更方便哦