欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue登錄頁面的動(dòng)態(tài)粒子背景插件實(shí)現(xiàn)

 更新時(shí)間:2021年07月11日 10:51:45   作者:王菜鳥  
本文主要介紹了Vue登錄頁面的動(dòng)態(tài)粒子背景插件實(shí)現(xiàn),將登錄組件背景設(shè)置為 "粒子背景",具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

動(dòng)態(tài)粒子效果如下:

在這里插入圖片描述

安裝插件

npm install vue-particles --save-dev

在main.js文件中全局引入

import VueParticles from 'vue-particles'  
Vue.use(VueParticles)

在vue文件中使用

 <vue-particles
          color="#409EFF"
          :particleOpacity="0.7"
          :particlesNumber="60"
          shapeType="circle"
          :particleSize="6"
          linesColor="#409EFF"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push">
</vue-particles>

將動(dòng)態(tài)粒子作為背景圖來用,當(dāng)有新的div需要呈現(xiàn)時(shí),會(huì)發(fā)現(xiàn)div是不能覆蓋vue-particles 內(nèi)容的,會(huì)依次靠后顯示。因此,加入了position:absolute,當(dāng)有新div盒子的時(shí)候,設(shè)置為position:relative

<style>
#particles-js {
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}
</style>

在這里插入圖片描述

關(guān)于以上屬性的介紹:

vue-particles的屬性:
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”

到此這篇關(guān)于Vue登錄頁面的動(dòng)態(tài)粒子背景插件實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue 動(dòng)態(tài)粒子背景內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue3中Watch、Watcheffect、Computed的使用和區(qū)別解析

    Vue3中Watch、Watcheffect、Computed的使用和區(qū)別解析

    Watch、Watcheffect、Computed各有優(yōu)劣,選擇使用哪種方法取決于應(yīng)用場景和需求,watch?適合副作用操作,watchEffect適合簡單的自動(dòng)副作用管理,computed?適合聲明式的派生狀態(tài)計(jì)算,本文通過場景分析Vue3中Watch、Watcheffect、Computed的使用和區(qū)別,感興趣的朋友一起看看吧
    2024-07-07
  • Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例

    Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例

    這篇文章主要介紹了Vue Element 分組+多選+可搜索Select選擇器實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • VUE+Element-ui實(shí)戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容

    VUE+Element-ui實(shí)戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容

    這篇文章主要介紹了VUE+Element-ui實(shí)戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue.js實(shí)現(xiàn)按鈕的動(dòng)態(tài)綁定效果及實(shí)現(xiàn)代碼

    Vue.js實(shí)現(xiàn)按鈕的動(dòng)態(tài)綁定效果及實(shí)現(xiàn)代碼

    本文通過實(shí)例代碼給大家介紹了Vue.js實(shí)現(xiàn)按鈕的動(dòng)態(tài)綁定效果,代碼簡單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧
    2017-08-08
  • vue3輸入框生成的時(shí)候如何自動(dòng)獲取焦點(diǎn)詳解

    vue3輸入框生成的時(shí)候如何自動(dòng)獲取焦點(diǎn)詳解

    記錄一下自己最近開發(fā)vue3.0的小小問題,下面這篇文章主要給大家介紹了關(guān)于vue3輸入框生成的時(shí)候如何自動(dòng)獲取焦點(diǎn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • 快速解決vue-cli在ie9+中無效的問題

    快速解決vue-cli在ie9+中無效的問題

    今天小編就為大家分享一篇快速解決vue-cli在ie9+中無效的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 帶你一文了解Vue生命周期鉤子

    帶你一文了解Vue生命周期鉤子

    生命周期鉤子又被叫做生命周期時(shí)間,生命周期函數(shù),生命周期鉤子就是vue生命周期中出發(fā)的各類事件,這些事件被稱為生命周期鉤子,下面這篇文章主要給大家介紹了關(guān)于Vue生命周期鉤子的相關(guān)資料,需要的朋友可以參考下
    2022-06-06
  • vue項(xiàng)目中禁用瀏覽器緩存配置案例

    vue項(xiàng)目中禁用瀏覽器緩存配置案例

    這篇文章主要介紹了vue項(xiàng)目中禁用瀏覽器緩存配置案例,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • Element UI 自定義正則表達(dá)式驗(yàn)證方法

    Element UI 自定義正則表達(dá)式驗(yàn)證方法

    今天小編就為大家分享一篇Element UI 自定義正則表達(dá)式驗(yàn)證方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • mpvue+vant app搭建微信小程序的方法步驟

    mpvue+vant app搭建微信小程序的方法步驟

    這篇文章主要介紹了mpvue+vant app搭建微信小程序的方法步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-02-02

最新評(píng)論