vue怎么实现登录页背景粒子特效

这篇“Vue怎么实现登录页背景粒子特效”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue怎么实现登录页背景粒子特效”文章吧。

效果图如下

上图中的点和线，是由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 >                        <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%;         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怎么实现登录页背景粒子特效”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。