这篇“vue怎么实现登录页背景粒子特效”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue怎么实现登录页背景粒子特效”文章吧。
效果图如下
上图中的点和线，是由Vue-Particles生成的，不仅自己动，还可以与用户的鼠标互动。例子的样式有点丑，大家凑合看一下吧。
1.1 安装
npm install vue-particles --save-dev
1.2 引入 main.js 文件
import Vue from 'vue' import VueParticles from 'vue-particles' Vue.use(VueParticles)
1.3 使用
<template> <div id="app"> <vue-particles class="login-background" color="#97D0F2" :particleOpacity="0.7" :particlesNumber="50" shapeType="circle" :particleSize="4" linesColor="#97D0F2" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"> </vue-particles> </div> </template>
1.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”。
1.5 注意
这里附上登录页完整代码，大家按需索取。
背景铺满屏幕需要设置 宽高100%。
<template>
<div>
<!-- #707070 -->
<vue-particles
class="login-background"
color="#97D0F2"
:particleOpacity="0.7"
:particlesNumber="50"
shapeType="circle"
:particleSize="4"
linesColor="#97D0F2"
:linesWidth="1"
:lineLinked="true"
:lineOpacity="0.4"
:linesDistance="150"
:moveSpeed="3"
:hoverEffect="true"
hoverMode="grab"
:clickEffect="true"
clickMode="push">
</vue-particles>
<div class="login-other">
<el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
<H3 class="loginTitle">人事管理系统</H3>
<el-form-item prop="username">
<el-input prefix-icon="el-icon-user-solid" size="normal" type="text" v-model="loginForm.username"
auto-complete="off"
placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input prefix-icon="el-icon-lock" size="normal" type="password" v-model="loginForm.password"
auto-complete="off"
placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item prop="code">
<div >
<el-input prefix-icon="el-icon-circle-check" size="normal" type="text"
v-model="loginForm.code" auto-complete="off"
placeholder="请输入验证码" @keydown.enter.native="submitLogin">
</el-input>
<img :src="vcUrl" @click="updateVerifyCode">
</div>
</el-form-item>
<el-checkbox size="normal" class="loginRemember" v-model="checked">记住密码</el-checkbox>
<el-button size="normal" type="primary" @click="submitLogin">登录</el-button>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
imgSrc: require('@/assets/logo.png'),
vcUrl: '/vhr/verifyCode?time=' + new Date(),
loginForm: {
username: 'admin',
password: '123',
code: ''
},
checked: true,
rules: {
username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
password: [{required: true, message: '请输入密码', trigger: 'blur'}],
code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
}
}
},
methods: {
//点击图片更新验证码
updateVerifyCode() {
this.vcUrl = '/vhr/verifyCode?time=' + new Date();
},
submitLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
//alert('submit!');
this.postKeyValueRequest('/doLogin', this.loginForm).then(resp => {
if (resp) {
// 保存登录信息到sessionStorage，关闭页面信息会清除
window.sessionStorage.setItem("user", JSON.stringify(resp.obj));
// 重定向路径
let path = this.$route.query.redirect;
this.$router.replace((path == '/' || path == undefined) ? '/home' : path);
} else {
this.vcUrl = '/vhr/verifyCode?time=' + new Date();
this.loginForm.code = "";
}
})
} else {
this.$message.error('登录失败，请重新登录。');
return false;
}
});
}
}
}
</script>
<style>
.login-background {
background: linear-gradient(-180deg, #dcf2e6 0%, #ffffff 100%);
width: 100%;
height: 100%; /**宽高100%是为了图片铺满屏幕 */
z-index: -1;
position: absolute;
}
.login-other {
z-index: 1;
margin: 180px 0 0 calc(calc(100vw - 410px) / 2);
position: absolute;
}
.loginContainer {
border-radius: 15px;
background-clip: padding-box;
width: 350px;
padding: 15px 35px 15px 35px;
background: #fefefe;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.loginTitle {
margin: 15px auto 20px auto;
text-align: center;
color: #707070;
}
.loginRemember {
text-align: left;
margin: 0 0 15px 0;
}
</style>以上就是关于“vue怎么实现登录页背景粒子特效”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
