源码搜藏网

本文实例为大家分享了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 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/verifyCodetime=' + 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/verifyCodetime=' + 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/verifyCodetime=' + 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。