介绍 import VueParticles 得到& # 39;vue-particles& # 39;,
Vue.use (VueParticles) & lt; template 比;
,& lt; div v-loading.fullscreen.lock=發oading"
类,,,=發ogin",
,,,element-loading-spinner=癴a fa-spinner fa-pulse fa-3x fa-fw"比;
& lt; vue-particles才能
,,,颜色=? 409 eff"
,,,:particleOpacity=?.7”;
,,,:particlesNumber=?0”;
,,,shapeType=癱ircle"
,,,:particleSize=?”;
,,,linesColor=? 409 eff"
,,,:linesWidth=?”;
,,,:lineLinked=皌rue"
,,,:lineOpacity=?.4”;
,,,:linesDistance=?50”;
,,,:移动速度=?”;
,,,:hoverEffect=皌rue"
,,,hoverMode=癵rab"
,,,:clickEffect=皌rue"
,,,clickMode=皃ush"
,,,祝辞,& lt;/vue-particles>
& lt;才能el-form :规则=皉ules"
,,,,,,:模型=發oginFrom"
,,,,,,类=發ogContainer"
,,,,,,ref=發oginFrom"
,,,,,,@keydown.enter.native=發oginSubmit"比;
,,& lt; h3 类=發ogtitle"祝辞& lt;小姐:类=癴a fa-drupal fa-2x"
,,,,,,,/祝辞,人,事,管,理& lt;/h3>
,,& lt; el-form-item 支持=皍sername"比;
,,,& lt; el-input 类型=皌ext"
,,,,,,,,v模型=發oginFrom.username"
,,,,,,,,占位符=扒胧淙胗没?
,,,,,,,,类=癷nputbg"
,,,,,,,,自动完成=皁ff"比;
,,,,& lt;小姐:槽=皃refix"
,,,,,,类=癳l-icon-user"祝辞& lt;/i>
,,,& lt;/el-input>
,,& lt;/el-form-item>
,,& lt; el-form-item 支持=皃assword"比;
,,,& lt; el-input 类型=皃assword"
,,,,,,,,v模型=發oginFrom.password"
,,,,,,,,占位符=扒胧淙朊苈搿?
,,,,,,,,自动完成=皁ff"比;
,,,,& lt;小姐:槽=皃refix"
,,,,,,类=癳l-icon-lock"祝辞& lt;/i>
,,,& lt;/el-input>
,,& lt;/el-form-item>
,,& lt; el-form-item 支持=癱ode"比;
,,,& lt; el-input v模型=發oginFrom.code"
,,,,,,,,自动完成=皁ff"
,,,,,,,,占位符=把橹ぢ搿?
,,,,,,,,
,,,,,,,,@keyup.enter.native=發oginSubmit"比;
,,,,& lt;小姐:槽=皃refix"
,,,,,,类=癳l-icon-view"祝辞& lt;/i>
,,,& lt;/el-input>
,,,& lt; div 类=發ogin-code"比;
,,,,& lt; img : src=https://www.yisu.com/zixun/癱odeUrl”
@click=" getCode ">
本篇文章为大家展示了怎么在vue项目中使用粒子实现一个粒子背景效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强>实现过程
安装vue-particles
<代码> npm安装vue-particles——save-dev
全局配置vue-particles
在主要。js里面:
使用vue-particles
在vue文件模板标签中:
