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 强制刷新页面的实现代码
Dec 13 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
用AngularJS的指令实现tabs切换效果
Aug 31 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
原生js实现九宫格拖拽换位
Jan 26 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
PHP面向对象编程快速入门
2006/10/09 PHP
学习php开源项目的源码指南
2014/12/21 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
原生javascript实现隔行换色
2015/01/04 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
乡镇纠风工作实施方案
2014/03/22 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
社区务虚会发言材料
2014/10/20 职场文书
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技