vue-particles粒子動畫插件的使用和爬坑出現垂直滾動條

1下載==》cnpm install vue-particles --save-dev 2引入 注冊--》main.js//插件
import VueParticles from 'vue-particles' Vue.use(VueParticles)

在使用的時候外層必須要有一個id包裹（重要） 否則展示不出來

<template>
<div class="maxnbox" ref="clcheight">
   
   <!-- 插件開始  外層使用了appp包裹  class="beijing"可以添加一張背景圖片 配合css引入-->
  <div id="apppp">
     <vue-particles color="#dedede" height="700px" :particleOpacity="0.7" :particlesNumber="90" shapeType="circle" :particleSize="4" linesColor="#dedede" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="200" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push" class="beijing"
      >
    </vue-particles>
  </div>
  <!-- end -->

 <div class="login-wrap">
    <!--  -->
    <div class="loginbox">
      <el-form :model="formLabelAlign" label-Width="80px" label-position="left">
        <h2 class="mytitle">
          <i class="el-icon-menu"></i>
 某某登陸系統 </h2>

        <el-form-item label="用戶名">
          <el-input type="text" v-model="formLabelAlign.username" placeholder="請輸入用戶名"></el-input>
        </el-form-item>

        <el-form-item v-if="visible" label="密碼">
          <el-input type="password" v-model="formLabelAlign.password" placeholder="請輸入密碼">
            <i slot="suffix" title="顯示密碼" @click="changePass('show')" style="cursor:pointer;" class="el-input__icon el-icon-success"
            ></i>
          </el-input>
        </el-form-item>

        <el-form-item v-else="visible" label="密碼">
          <el-input type="text" v-model="formLabelAlign.password" placeholder="請輸入密碼">
            <i slot="suffix" title="隱藏密碼" @click="changePass('hide')" style="cursor:pointer;" class="el-input__icon el-icon-service"
            ></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click.prevent="handleLogin">登陸</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div> 
</div>
</template>

 

<script> export default { data() { return { //  formLabelAlign: { username: "", password: "" }, visible: true //是否顯示密碼
 }; }, methods: { changePass(value) { //判斷渲染，true:暗文顯示，false:明文顯示
      if (value == "show") { this.visible = false; } else { this.visible = true; } }, async handleLogin() { const res = await this.$http.post("login", this.formLabelAlign); console.log(res); const { data, meta: { msg, status } } = res.data; if (status === 200) { this.$message({ showClose: true, message: msg, type: "success" }); localStorage.setItem("token", data.token); //保存token
        this.$router.push({ name: "home" }); } else { this.$message({ showClose: true, message: msg, type: "error" }); } } },
 
 //獲取屏幕的高度 解決出現的滾動條而且配合css

   .maxnbox{

     overflow-y: hidden;

      padding: 0;

      margin: 0;

   }

 mounted(){ this.$refs.clcheight.style.height=`${document.documentElement.clientHeight}px` //解決出現的滾動條 console.log( this.$refs.clcheight) console.log(`${document.documentElement.clientHeight}` ) //獲取屏幕可視化區域的高度
 } }; </script>

 

<style  scoped>
//解決滾動條的一部分
.maxnbox{
  overflow-y: hidden;
  padding: 0;
  margin: 0;
}
.login-wrap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*  */
/*引入背景圖*/
.beijing{
   background: url("../../assets/img/bg.jpg") center ;
   padding: 0;
   margin: 0;
   overflow-y:hidden;
}

.mytitle {
  text-align: center;
}
/*居中*/
.loginbox {
  background: #f5f5f5;
  width: 40%;
  padding: 20px;
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 20%;
  margin: auto;
}

/*登錄按鈕的長度*/
.el-button--primary {
  width: 100%;
}
</style>

 

 

 

 

參考的網址

https://www.jianshu.com/p/53199b842d25   粒子動畫

https://blog.csdn.net/jerrica/article/details/80669038 動態獲取可視化高度