上图中的点和线，是由Vue-Particles生成的，不仅自己动，还可以与用户的鼠标互动。例子的样式有点丑，大家凑合看一下吧。
1. 使用教程
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 style="display: flex;justify-content: space-between"> <el-input prefix-icon="el-icon-circle-check" style="width: 230px" 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" style="width: 100%;" @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>
