Vue-particles using particle animation plug-pit and climb the vertical scroll bar appear

1 download == "CNPM install VUE-Particles --save- dev 

2 introduced registration -" main.js // plug- 
Import VueParticles from 'VUE-Particles' 
Vue.use (VueParticles)

When in use the outer layer must have an id parcel (important) does not come out otherwise show

<Template> 
<div class = "maxnbox" ref = "clcheight"> 
   
   <-! plug-in to start using appp outer wrapping class = "beijing" You can add a background image with the introduction of css -> 
  <div the above mentioned id = " apppp "> 
     <vue- Particles 
        Color =" # Dedede " 
         height =" 700px " 
        : particleOpacity =" 0.7 " 
        : particlesNumber =" 90 " 
        shapeType =" Circle " 
        : particleSize =". 4 " 
        linesColor =" # Dedede " 
        : linesWidth = "1" 
        : lineLinked = "to 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>
        <Item-EL-form label = "User Name"></ H2>          Certain landing system
        


          <EL-the INPUT of the type = "text" v-Model = "formLabelAlign.username" placeholder = "Please enter your user name"> </ 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: to true  // whether the password 
    }; 
  }, 

 

  Methods: { 
    changepass (value) { 
      // Analyzing rendering, true: dark message display, false: plain text 
      IF (value == "Show" ) {
         the this .Visible = to false ; 
      } the else {
         the this .Visible = to 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 动态获取可视化高度