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
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:;
margin:;
}
.login-wrap {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* */
/*引入背景图*/
.beijing{
background: url("../../assets/img/bg.jpg") center ;
padding:;
margin:;
overflow-y:hidden;
} .mytitle {
text-align: center;
}
/*居中*/
.loginbox {
background: #f5f5f5;
width: 40%;
padding: 20px;
height: auto;
position: absolute;
left:;
right:;
top: 20%;
margin: auto;
} /*登录按钮的长度*/
.el-button--primary {
width: 100%;
}
</style>
参考的网址
https://www.jianshu.com/p/53199b842d25 粒子动画
https://blog.csdn.net/jerrica/article/details/80669038 动态获取可视化高度
vue-particles粒子动画插件的使用和爬坑出现垂直滚动条的更多相关文章
- vue组件中,iview的modal组件爬坑--modal的显示与否应该是使用v-show
这是我第一次写博客,主要是记录下自己解决问题的过程和知识的总结,如有不对的地方欢迎指出来! 需求:点击btn,弹出modal显示图表(以折现图为例) 这应该是很基本的需求也是很容易实现的,代码和效果如 ...
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- 带着canvas去流浪系列之九 粒子动画【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- 带着canvas去流浪系列之九 粒子动画
[摘要] canvas实现粒子动画 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 粒子特效 粒子特效一般指密集点阵效果,它并不是canvas独有 ...
- 【带着canvas去流浪(9)】粒子动画
目录 一. 粒子特效 二. 开发中遇到的问题 2.1 卡顿 2.2 轨迹 2.3 复位 2.4 防护层 2.5 二维向量类 三. 实现讲解 3.1 粒子类的update方法 3.2 粒子群的绘制 3. ...
- Vue过渡与动画
通过 Vue.js 的过渡系统,可以在元素从 DOM 中插入或移除时自动应用过渡效果.Vue.js 会在适当的时机为你触发 CSS 过渡或动画,你也可以提供相应的 JavaScript 钩子函数在过渡 ...
- VUE常用UI组件插件及框架
UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
- Objective-c粒子动画
前面贴过几篇关于SpriteKit的案例文章,其中涉及到的动画都是材质类的图片切换或则常规的动画效果,没涉及到今天要说的粒子动画,今天说的粒子动画就是在游戏中实现更佳炫酷的效果必须使用的类,OC中粒子 ...
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
随机推荐
- 第50 课C++对象模型分析——成员函数(上)
类中的成员函数位于代码段中调用成员函数时对象地址作为参数隐式传递成员函数通过对象地址访问成员变量C++语法规则隐藏了对象地址的传递过程 #include<iostream> #includ ...
- [C2P1] Andrew Ng - Machine Learning
About this Course Machine learning is the science of getting computers to act without being explicit ...
- angular跳转和传参
使用routerLink跳转 <a routerLink=["/exampledetail",id]></a> <a routerLink=[&quo ...
- UAC简介
用户帐户控制 (User Account Control) 是Windows Vista(及更高版本操作系统)中一组新的基础结构技术,可以帮助阻止恶意程序(有时也称为“恶意软件”)损坏系统,同时也可以 ...
- DWR日志 在log4j.xml配置
一.日志 DWR依赖 Apache Commons Logging,可以使用log4j实现日志记录功能. 1.1 日志简介 和其他日志框架一样,当设置低等级的日志时所有高于此等级的日志也将会打印出来. ...
- 一、Spring注解之@ComponentScan
Spring注解之@ComponentScan [1]@ComponentScan注解是什么 @ComponentScan主要就是定义扫描的路径从中找出标识了需要装配的类自动装配到spring的bea ...
- Gin框架 - 数据绑定和验证
概述 上篇文章分享了 Gin 框架使用 Logrus 进行日志记录,这篇文章分享 Gin 框架的数据绑定与验证. 有读者咨询我一个问题,如何让框架的运行日志不输出控制台? 解决方案: engine : ...
- 移动端BUG
1.解决 Android 系统 设置line-height和height相同,文字却偏上显示(pc端和ios都显示ok) 行高设置为 normal 则可以解决. 然后高度通过padding填充 lin ...
- JQ动态生成节点绑定事件无效问题
最近做项目的时候遇见了一个问题,通过jq将动态节点绑定到dom节点上,并且为动态节点绑定方法,此方法再次为动态节点添加动态节点,但在刷新之后,动态节点上的方法失效了,过程为:创建动态节点->动态 ...
- SQL和T-SQL之间的区别
对于SQL,在我的上一篇博客中<何谓SQL Server数据库?与Access数据库 有什么区别>里面,已经着重说明了SQL作为访问和处理数据库的标准的计算机语言,所以这里就不做过多强调. ...