vue-particles粒子动画插件的使用和爬坑出现垂直滚动条

Posted 2022-11-23 iwishicould

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.clientHeightpx`  //解决出现的滚动条
    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 动态获取可视化高度