vue 登录页背景-粒子特效(Vue-Particles)

简介: vue 登录页背景-粒子特效(Vue-Particles)

上图中的点和线,是由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>


相关文章
|
3天前
|
JavaScript 算法 Linux
【vue报错】error:0308010C:digital envelope routines::unsupported
【vue报错】error:0308010C:digital envelope routines::unsupported
29 3
|
2天前
|
JavaScript 搜索推荐 测试技术
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
深入了解 Vue CLI:现代化 Vue.js 项目开发工具
|
3天前
|
JavaScript
【vue】vue2 获取本地IP地址
【vue】vue2 获取本地IP地址
8 1
|
3天前
|
JavaScript
【vue】 element upload文件上传后表单校验信息还存在
【vue】 element upload文件上传后表单校验信息还存在
14 1
|
3天前
|
JavaScript 前端开发
|
4天前
|
JavaScript
vue 组件注册
vue 组件注册
|
4天前
|
JavaScript 前端开发 开发者
|
4天前
|
JavaScript
vue 组件事件
vue 组件事件
|
4天前
|
自然语言处理 JavaScript 前端开发
vue 插槽(二)
vue 插槽(二)
|
4天前
|
存储 JavaScript 搜索推荐
vue如何实现登录数据的持久化
vue如何实现登录数据的持久化