vue粒子效果

粒子效果是一个很好玩很有趣的东西，前几天有人问我vue怎么使用粒子效果，其实vue使用一些简单粒子效果很容易，下面给大家上代码。

对！之前有人问我vue封装的模态框为什么非要用jq和操作dom，其实根本不需要，那篇文章只是为了这个要求，vue里的transition标签，其实我们使用这个标签就可以做很多的东西。

以下粒子效果也只是一些简单的效果

1、下载依赖

npm install vue-particles --save-dev

2、main引入

import VueParticles from 'vue-particles'

Vue.use(VueParticles)

3、直接使用

<vue-particles

        color="#47CD88"

        :particleOpacity="0.7"

        :particlesNumber="80"

        shapeType="circle"

        :particleSize="4"

        linesColor="#47CD88"

        :linesWidth="1"

        :lineLinked="true"

        :lineOpacity="0.4"

        :linesDistance="150"

        :moveSpeed="3"

        :hoverEffect="true"

        hoverMode="grab"

        :clickEffect="true"

        clickMode="push"

      >

</vue-particles>

4、属性

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"

作者：youth_MrZhou

链接：https://www.jianshu.com/p/26f6fff77cc5

來源：简书

简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。