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

为了提高页面展示效果，登录界面内容比较单一的，粒子效果作为背景经常使用到，vue工程中利用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标签中：

class="login"

element-loading-spinner="fa fa-spinner fa-pulse fa-3x fa-fw">

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"

:model="loginFrom"

class="logContainer"

ref="loginFrom"

@keydown.enter.native="loginSubmit">

style="color: #505458" /> 人事管理

v-model="loginFrom.username"

placeholder="请输入用户名"

class="inputbg"

auto-complete="off">

class="el-icon-user">

v-model="loginFrom.password"

placeholder="请输入密码"

auto-complete="off">

class="el-icon-lock">

auto-complete="off"

placeholder="验证码"

style="width: 63%"

@keyup.enter.native="loginSubmit">

class="el-icon-view">

@click="getCode">

style="margin:0 0 25px 0;">

记住我

style="width:100%; position: relative;"

@click="loginSubmit">登录

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

#particles-js{

width: 100%;

height: calc(100% - 100px);

position: absolute;

}

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

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

style="width:100%; position: relative;"

@click="loginSubmit">登录

附：具体参数说明

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实现粒子背景效果及遇到的坑(按钮没有点击响应)，希望对大家有所帮助！

html未点击背景点击背景,vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)...相关推荐

vue-particles（粒子背景）插件在Vue项目中使用
前言: 因为领导让我给整个项目加一个粒子背景,所以才有了这篇文章,那我就说一下我项目中是如何使用的吧,我也搜索了有关资料,基本上都是用在首页的,但是我这个他让我用在整个项目中.一开始我也是先用的par ...
Vue项目中使用vue-particles（粒子背景）插件
vue-particles 是什么? 它是一个粒子背景插件. github地址:https://github.com/creotip/vue-particles 使用方法: 1.安装插件 npm in ...
Element UI 的el-menu在VUE项目中实现再次点击左侧菜单栏，右侧页面内容刷新
背景:在对项目进行bug走查的时候,测试人员突然提出项目左侧菜单栏再次点击时候要进行页面刷新,当时我真的懵了,vue项目了router还能在当前页面进行再次刷新!!!我怀着疑惑上网查询.咨询足足使用了 ...
Vue项目中设置背景图片
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: backgroun ...
vue项目中背景图片写成行内样式不显示
今天写代码的时候发现把背景图片写在行内样式中没法显示 <div class="template-card" style="background-image:url( ...
vue 项目中点击回车键自动登录
看到有些人写的比较好就转载了网址 https://blog.csdn.net/julying/article/details/83587370 回车登录 https://blog.csdn.n ...
vue 项目中使实现粒子动态背景图
在vue中,实现粒子动态背景图的效果首先安装插件 npm install vue-particles --save-dev 在main.js 文件中进行引用注册 // 动态粒子 import Vu ...
【js】vue项目中实现点击复制过滤条件，获取并处理粘贴板内容
前情提要有这样一个需求:每次重复选过滤条件太麻烦啦,需要一个可以复制过滤条件的功能!过滤条件类似下图. 主要步骤第一步:复制工具的选取.这里我选用的是原生的Document.execCommand ...
解决vue项目中重复点击导航路由报错
vue版本 "vue": "^2.6.11", 主要代码 //重复点击导航路由报错 const originalPush = VueRouter.prototy ...
vue 项目中使用el-table勾选或点击某行字体加粗
第一种:表格某行数据的id: //index.vue <el-tableref="repairTable":data="tableData.data"st ...

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

html未点击背景点击背景,vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)...相关推荐

最新文章

热门文章

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

html未点击背景 点击背景,vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)...相关推荐

最新文章

热门文章

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

html未点击背景点击背景,vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)...相关推荐