vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)


Posted in Javascript onFebruary 11, 2020

为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果。

解决问题:

  • 以背景方式显示
  • 无法获取按钮焦点,触发不了点击事件

vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)

实现过程

安装vue-particles

npm install vue-particles --save-dev

全局配置vue-particles

在main.js里面:

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

使用 vue-particles

在vue文件template标签中:

<template >
 <div v-loading.fullscreen.lock="loading"
    class="login" 
    element-loading-spinner="fa fa-spinner fa-pulse fa-3x fa-fw">
  <vue-particles
    color="#409EFF"
    :particleOpacity="0.7"
    :particlesNumber="80"
    shapeType="circle"
    :particleSize="4"
    linesColor="#409EFF"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
   >  </vue-particles>
  <el-form :rules="rules"
       :model="loginFrom"
       class="logContainer"
       ref="loginFrom"
       @keydown.enter.native="loginSubmit">
   <h2 class="logtitle"><i class="fa fa-drupal fa-2x"
       style="color: #505458" /> 人 事 管 理</h2>
   <el-form-item prop="username">
    <el-input type="text"
         v-model="loginFrom.username"
         placeholder="请输入用户名"
         class="inputbg"
         auto-complete="off">
     <i slot="prefix"
       class="el-icon-user"></i>
    </el-input>
   </el-form-item>
   <el-form-item prop="password">
    <el-input type="password"
         v-model="loginFrom.password"
         placeholder="请输入密码"
         auto-complete="off">
     <i slot="prefix"
       class="el-icon-lock"></i>
    </el-input>
   </el-form-item>
   <el-form-item prop="code">
    <el-input v-model="loginFrom.code"
         auto-complete="off"
         placeholder="验证码"
         style="width: 63%"
         @keyup.enter.native="loginSubmit">
     <i slot="prefix"
       class="el-icon-view"></i>
    </el-input>
    <div class="login-code">
     <img :src="codeUrl"
        @click="getCode">
    </div>
   </el-form-item>
   <el-checkbox v-model="loginFrom.rememberMe"
          style="margin:0 0 25px 0;">
    记住我
   </el-checkbox>
   <el-button type="primary" 
         style="width:100%; position: relative;"
         @click="loginSubmit">登录</el-button>
  </el-form>
 </div>
</template>

vue-particles有一个id为默认为particles-js,可以根据这个id来设置样式。设置之后就可以显示了。

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

我在做完这一步时,发现点击按钮触发不了。

后来做了如下修改;加个样式 position: relative;,将button的定位写出相对定位就OK啦,我也不知道啥原因,想着修改之前是好的, 可能 被position: absolute;  影响了,所以就一个个试 position的属性

<el-button type="primary" 
         style="width:100%; position: relative;"
         @click="loginSubmit">登录</el-button>

附:具体参数说明

color: String类型。默认'#dedede'。粒子颜色。
particleOpacity: Number类型。默认0.7。粒子透明度。
particlesNumber: Number类型。默认80。粒子数量。
shapeType: String类型。默认'circle'。可用的粒子外观类型有:"circle","edge","triangle", "polygon","star"。
particleSize: Number类型。默认80。单个粒子大小。
linesColor: String类型。默认'#dedede'。线条颜色。
linesWidth: Number类型。默认1。线条宽度。
lineLinked: 布尔类型。默认true。连接线是否可用。
lineOpacity: Number类型。默认0.4。线条透明度。
linesDistance: Number类型。默认150。线条距离。
moveSpeed: Number类型。默认3。粒子运动速度。
hoverEffect: 布尔类型。默认true。是否有hover特效。
hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
clickEffect: 布尔类型。默认true。是否有click特效。
clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"。

总结

以上所述是小编给大家介绍的vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应),希望对大家有所帮助!

Javascript 相关文章推荐
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
24款非常有用的 jQuery 插件分享
Apr 06 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 #Javascript
js实现单元格拖拽效果
Feb 10 #Javascript
详解Vue template 如何支持多个根结点
Feb 10 #Javascript
JavaScript canvas动画实现时钟效果
Feb 10 #Javascript
JavaScript canvas仿代码流瀑布
Feb 10 #Javascript
Vue数字输入框组件使用方法详解
Feb 10 #Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 #Javascript
You might like
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
angularjs $http实现form表单提交示例
2017/06/09 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
js实现时间日期校验
2020/05/26 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
python self,cls,decorator的理解
2009/07/13 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
SVM基本概念及Python实现代码
2017/12/27 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
自主招生自荐信
2013/12/08 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
土木工程专业推荐信
2014/02/19 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
乔迁新居祝福语
2019/11/04 职场文书
windows server2008 开启端口的实现方法
2022/06/25 Servers