使用vue怎么实现一个粒子特效 - 行业资讯 - 肥雀云

　　介绍

使用vue怎么实现一个粒子特效?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

使用教程

npm install vue-particles ——save-dev

主要。js文件:

import Vue 得到& # 39;vue # 39;, 　　import VueParticles 得到& # 39;vue-particles& # 39;, 　　Vue.use (VueParticles)

应用程序。vue文件——一个简单的例子:

& lt; template>, 　　& lt;才能div id=癮pp"比; 　　,,& lt; vue-particles 颜色=? dedede"祝辞& lt;/vue-particles> 　　& lt;才能/div> 　　,& lt;/template>

应用程序。vue文件——一个完整的例子:

& lt; template>, 　　& lt;才能div id=癮pp"比; 　　& lt; vue-particles。才能　　,,,颜色=? dedede" 　　,,,:particleOpacity=?.7”; 　　,,,:particlesNumber=?0”; 　　,,,shapeType=癱ircle" 　　,,,:particleSize=?”; 　　,,,linesColor=? dedede" 　　,,,:linesWidth=?”; 　　,,,:lineLinked=皌rue" 　　,,,:lineOpacity=?.4”; 　　,,,:linesDistance=?50”; 　　,,,:移动速度=?”; 　　,,,:hoverEffect=皌rue" 　　,,,hoverMode=癵rab" 　　,,,:clickEffect=皌rue" 　　,,,clickMode=皃ush" 　　,,在　　,,& lt;/vue-particles> 　　& lt;才能/div> 　　,& lt;/template>

属性:

<李>

颜色:字符串类型。默认& # 39;# dedede& # 39;。粒子颜色。

<李>

particleOpacity:数量类型。默认0.7。粒子透明度。

<李>

particlesNumber:数量类型。默认80。粒子数量。

<李>

shapeType:字符串类型。默认& # 39;圆# 39;。可用的粒子外观类型有:“circle",“edge",“triangle",“polygon",“star"。

<李>

particleSize:数量类型。默认80。单个粒子大小。

<李>

linesColor:字符串类型。默认& # 39;# dedede& # 39;。线条颜色。

<李>

linesWidth:数量类型。默认1。线条宽度。

<李>

lineLinked:布尔类型。默认真的。连接线是否可用。

<李>

lineOpacity:数量类型。默认0.4。线条透明度。

<李>

linesDistance:数量类型。默认150。线条距离。

<李>

移动速度:数量类型。默认3。粒子运动速度。

<李>

hoverEffect:布尔类型。默认真的。是否有悬停特效。

<李>

hoverMode:字符串类型。默认真的。可用的悬停模式有:“grab",“repulse",“bubble"。

<李>

clickEffect:布尔类型。默认真的。是否有点击特效。

<李>

clickMode:字符串类型。默认真的。可用的点击模式有:“push",“remove",“repulse",“bubble"。

关于使用vue怎么实现一个粒子特效问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。