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

更新時(shí)間：2022年04月07日 13:05:44 作者：沒對(duì)象的指針

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄頁背景粒子特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)登錄頁背景粒子特效的具體代碼，供大家參考，具體內(nèi)容如下

上圖中的點(diǎn)和線，是由Vue-Particles生成的，不僅自己動(dòng)，還可以與用戶的鼠標(biāo)互動(dòng)。例子的樣式有點(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)動(dòng)速度。
hoverEffect: 布爾類型。默認(rèn)true。是否有hover特效。
hoverMode: String類型。默認(rèn)true。可用的hover模式有: “grab”, “repulse”, “bubble”。
clickEffect: 布爾類型。默認(rèn)true。是否有click特效。
clickMode: String類型。默認(rèn)true。可用的click模式有: “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="請(qǐng)輸入用戶名"></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="請(qǐng)輸入密碼"></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="請(qǐng)輸入驗(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" 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: '請(qǐng)輸入用戶名', trigger: 'blur'}],
? ? ? ? ? ? ? ? ? ? password: [{required: true, message: '請(qǐng)輸入密碼', trigger: 'blur'}],
? ? ? ? ? ? ? ? ? ? code: [{required: true, message: '請(qǐng)輸入驗(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)閉頁面信息會(huì)清除
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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('登錄失敗，請(qǐng)重新登錄。');
? ? ? ? ? ? ? ? ? ? ? ? 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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: