vue怎么實(shí)現(xiàn)登錄頁背景粒子特效

這篇“vue怎么實(shí)現(xiàn)登錄頁背景粒子特效”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue怎么實(shí)現(xiàn)登錄頁背景粒子特效”文章吧。

效果圖如下

上圖中的點(diǎn)和線，是由Vue-Particles生成的，不僅自己動，還可以與用戶的鼠標(biāo)互動。例子的樣式有點(diǎn)丑，大家湊合看一下吧。

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 參數(shù)解釋

• color: String類型。默認(rèn)’#dedede’。粒子顏色。

• particleOpacity: Number類型。默認(rèn)0.7。粒子透明度。

• particlesNumber: Number類型。默認(rèn)80。粒子數(shù)量。

• shapeType: String類型。默認(rèn)’circle’?？捎玫牧Ｗ油庥^類型有：“circle”,“edge”,“triangle”,“polygon”,“star”。

• particleSize: Number類型。默認(rèn)80。單個(gè)粒子大小。

• linesColor: String類型。默認(rèn)’#dedede’。線條顏色。

• linesWidth: Number類型。默認(rèn)1。線條寬度。

• lineLinked: 布爾類型。默認(rèn)true。連接線是否可用。

• lineOpacity: Number類型。默認(rèn)0.4。線條透明度。

• linesDistance: Number類型。默認(rèn)150。線條距離。

• moveSpeed: Number類型。默認(rèn)3。粒子運(yùn)動速度。

• hoverEffect: 布爾類型。默認(rèn)true。是否有hover特效。

• hoverMode: String類型。默認(rèn)true?？捎玫膆over模式有: “grab”, “repulse”, “bubble”。

• clickEffect: 布爾類型。默認(rèn)true。是否有click特效。

• clickMode: String類型。默認(rèn)true?？捎玫腸lick模式有: “push”, “remove”, “repulse”, “bubble”。

1.5 注意

這里附上登錄頁完整代碼，大家按需索取。
背景鋪滿屏幕需要設(shè)置 寬高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">人事管理系統(tǒng)</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="請輸入驗(yàn)證碼" @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: '請輸入驗(yàn)證碼', trigger: 'blur'}]
                }
            }
        },
        methods: {
            //點(diǎn)擊圖片更新驗(yàn)證碼
            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，關(guān)閉頁面信息會清除
                                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>

以上就是關(guān)于“vue怎么實(shí)現(xiàn)登錄頁背景粒子特效”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。