vue-particles

粒子效果支持鼠标交互（悬停和点击）和自定义配置，如使用 :options 属性传入复杂配置对象。在布局中，粒子组件默认为绝对定位，需注意与其它元素的层级关系，可能需要调整 CSS 样式（如添加 position: relative 到父容器）以避免布局错位。

使用

<vue-particles
  color="#409EFF"
  :particleOpacity="0.7"
  :particlesNumber="80"
  shapeType="circle"
  :particleSize="4"
  linesColor="#409EFF"
  :linesWidth="1"
  :lineLinked="true"
  :lineOpacity="0.4"
  :linesDistance="150"
  :moveSpeed="3"
  :hoverEffect="true"
  hoverMode="grab"
  :clickEffect="true"
  clickMode="push"
/>

关键属性包括：

• color：粒子颜色。
• particleOpacity：粒子透明度。
• particlesNumber：粒子数量。
• shapeType：粒子形状（如 circle、edge、triangle 等）。
• particleSize：粒子大小。
• linesColor：连接线颜色。
• linesWidth：线条宽度。
• lineLinked：是否显示连接线。
• lineOpacity：线条透明度。
• linesDistance：线条连接距离。
• moveSpeed：粒子运动速度。
• hoverEffect：是否启用鼠标悬停效果。
• hoverMode：悬停模式（如 grab、repulse）。
• clickEffect：是否启用点击效果。
• clickMode：点击模式（如 push、remove）。