vue工程：使用vue-particles实现动态粒子效果且只作为背景显示（包括样式设置）

短命女 2021-07-24 14:55 1082阅读 2赞

**目录**

一、综述

二、实现过程

2.1 安装vue-particles

2.2 全局配置vue-particles

2.3 使用 vue-particles

三、具体参数说明

四、样式调整，实现只作为背景

4.1、根据id号调整样式

4.2 根据自定义的class名称lizi设置样式

--------------------

# 一、综述 #

为了提高页面展示效果，特别类似于登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

# 二、实现过程 #

## 2.1 安装vue-particles ##

npm install vue-particles --save-dev

## 2.2 全局配置vue-particles ##

在main.js里面：

import VueParticles from 'vue-particles'  
    Vue.use(VueParticles)

## 2.3 使用 vue-particles ##

在vue文件template标签中：

<vue-particles
            id="particles-js"    	/* 此处可以手动定义id为默认值particles-js，也可以不写 */
            /* 圆点设置：				颜色、透明度、数量、外形、大小 */
            color="#fff"
            :particleOpacity="0.7"
            :particlesNumber="60"
            shapeType="circle"
            :particleSize="4"
          /* 线的设置：				颜色、线宽、、透明度、最大连接距离、移动速度，等等 */
            linesColor="#fff"
            :linesWidth="1"
            :lineLinked="true"
            :lineOpacity="0.4"
            :linesDistance="150"
            :moveSpeed="2"
            :hoverEffect="true"
            hoverMode="grab"
            :clickEffect="true"
            clickMode="push"
            class="lizi"   //此处又定义了一个类class，也可以通过它设置粒子样式
          >
     </vue-particles>

# 三、具体参数说明 #

*  `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"。

# 四、样式调整，实现只作为背景 #

## 4.1、根据id号调整样式 ##

vue-particles有一个id为默认为particles-js，可以根据这个id来设置样式。

#particles-js{
            width: 100%;
            height: calc(100% - 100px);
            position: absolute;   //设置absolute,其他DIV设置为relative，这样这个例子效果就作为背景
        }

## 4.2 根据自定义的class名称**lizi**设置样式 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/e9ee39bd36a74163a8da10b1dd5aee19.png