代码拉取完成,页面将自动刷新
同步操作将从 陌溪/LearningNotes 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
这两天有个老哥给我推荐博客的后台登录页面添加粒子特效,后面看了看效果还不错,就把打加入到博客的后台登录页面中了,下面看添加后的效果图:
图上那些类似于星座图的点和线,是由vue-particles生成的,不仅自己动,而且能与用户鼠标事件产生互动。
安装 vue-particles依赖
npm install vue-particles --save-dev
main.js引入
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
在index.vue页面中引入
<vue-particles
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"
>
</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"在引入到页面的时候,我们需要注意,不能够直接放在页面的最上方,这样会显示不了我们写的页面,因为这个粒子特效是向上覆盖的,所以我们需要在我们页面的最下方引入才行,如我的页面所示:
<template>
<div class="login-container">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
auto-complete="on"
label-position="left"
>
<h3 class="title">蘑菇博客后台管理系统</h3>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user"/>
</span>
<el-input
v-model="loginForm.username"
name="username"
type="text"
auto-complete="on"
placeholder="username"
/>
</el-form-item>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password"/>
</span>
<el-input
:type="pwdType"
v-model="loginForm.password"
name="password"
auto-complete="on"
placeholder="password"
@keyup.enter.native="handleLogin"
/>
<span class="show-pwd" @click="showPwd">
<svg-icon icon-class="eye"/>
</span>
</el-form-item>
<el-form-item>
<el-button
:loading="loading"
type="primary"
style="width:100%;"
@click.native.prevent="handleLogin"
>登 录</el-button>
</el-form-item>
</el-form>
<!--引入粒子特效-->
<vue-particles
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"
>
</vue-particles>
</div>
</template>
vue-particles官方地址:https://vue-particles.netlify.com/
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。