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?？捎玫膆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="請(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js項(xiàng)目部署到服務(wù)器的詳細(xì)步驟
這篇文章給大家介紹了Vue.js項(xiàng)目部署到服務(wù)器的詳細(xì)步驟，既然是部署到服務(wù)器，肯定是需要一個(gè)云的。具體思路步驟大家可以參考下本文2017-07-07
這篇文章主要介紹了vue懸浮可拖拽懸浮按鈕的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue ElementUI之Form表單驗(yàn)證遇到的問題
這篇文章主要介紹了Vue ElementUI之Form表單驗(yàn)證遇到的問題,需要的朋友可以參考下2017-08-08
解決element DateTimePicker+vue彈出框只顯示小時(shí)
這篇文章主要介紹了解決element DateTimePicker+vue彈出框只顯示小時(shí)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
在vue中高德地圖引入和軌跡的繪制的實(shí)現(xiàn)
這篇文章主要介紹了在vue中高德地圖引入和軌跡的繪制的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
v-slot和slot、slot-scope之間相互替換實(shí)例
這篇文章主要介紹了v-slot和slot、slot-scope之間相互替換實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
本文主要介紹了Vue實(shí)現(xiàn)全局菜單搜索框的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
vuex實(shí)現(xiàn)簡(jiǎn)易計(jì)數(shù)器
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)一個(gè)簡(jiǎn)易計(jì)數(shù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
vue 解決setTimeOut和setInterval函數(shù)無效報(bào)錯(cuò)的問題
這篇文章主要介紹了vue 解決setTimeOut和setInterval函數(shù)無效報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vant picker+popup 自定義三級(jí)聯(lián)動(dòng)案例
這篇文章主要介紹了vant picker+popup 自定義三級(jí)聯(lián)動(dòng)案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11