vue-particles粒子插件的使用

vue-particles的安装

npm install vue-particles --save-dev

vue-particles如何在vue项目中导入
在main.js中文件中全局引入vue-particles

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

vue-particles的使用

<template><div id="app"><vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="30" shapeType="star" :particleSize="5"linesColor="#fff":linesWidth="2" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3":hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"></vue-particles></div></template>

各个属性的作用的话可以参照官方文档进行学习，或者GitHub上进行学习。如果想要添加背景图的话，可以给vue-partivles添加一个class，然后设置相应的背景图片。以上vue-particles的设置效果如下：

vue-particles粒子插件如何兼容IE

以上效果是在chrome中打开的，但是当你在IE中打开的时候，你会发现页面一片空白，打开控制面板，报错如下：

SCRIPT: 缺少':'

解决方法：
首先找到vue-particles/index.js文件，目录如下

node_modules --> vue-particles --> src --> vue-particles -->index.js

原index.js代码如下：

/* 20200920 Created By Qiaozi */
/* eslint-disable */
import particles from './vue-particles.vue'const VueParticles = {install (Vue, options) {Vue.component('vue-particles', particles)}}export default VueParticles
/* eslint-disable */

因为在IE中不支持 install() {} 这样的写法，故将原index.js文件修改如下：

/* 20200920 Created By Qiaozi */
/* eslint-disable */
import particles from './vue-particles.vue'const VueParticles = {install: function(Vue, options) {Vue.component('vue-particles', particles)}}export default VueParticles
/* eslint-disable */

此时在IE浏览器中打开便不会一片空白啦。

vue-particles粒子插件的使用相关推荐

vue3 使用particles粒子效果插件，修改粒子画布宽高
一.安装 npm install particles.vue3 二.main.js引用 import VueParticles from "particles.vue3"; con ...
particles.js粒子插件科技感背景
下载地址particles.js是一款js粒子特效插件,这是个particles.js插件的调用粒子,很有科技感的网页背景动画效果,网页颜色可以任意切换. dd:
【Web开发】粒子插件vue-particles的使用
今日在尝试开发一个登录界面时,发现背景是一张图片挺平平无奇,为了让界面更加炫酷,学习使用粒子插件vue-particles 插件安装 npm install vue-particles --save ...
ae灯光插件_AE教程｜Particular粒子插件全面讲解介绍官方视频教程「中文字幕」...
关注并私信"particular"获取教程教程简介 Particular 粒子插件的强大和受欢迎程度,相信不用大脸多介绍,它是AE软件中最常用的一款粒子插件.这套教程是 RedG ...
[vue] 组件和插件有什么区别？
[vue] 组件和插件有什么区别? 组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue.插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 V ...
[vue] 怎么在vue中使用插件？
[vue] 怎么在vue中使用插件? npm 安装然后再main.js 引入最后 vue.use(插件名) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
vue 右键菜单插件简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
vue连线插件_一起写一个即插即用的 Vue Loading 插件
写在之前实现 Loading 思路上并不困难,只不过是根据请求前后进行设置而已,可当要设置的状态越来越多又不能全局统一设置时,就又变得十分繁琐重复.在 Github 和各个社区站里搜 Loading ...
vue 图片引入_一个Vue的时间插件
安装 npm install -S hzqing-vue-timeline 如何引入 main.js: // 全局注册import hzqingVueTimeline from 'hzqing-vue ...

vue-particles粒子插件的使用

vue-particles粒子插件的使用

vue-particles粒子插件的使用

vue-particles粒子插件如何兼容IE

vue-particles粒子插件的使用相关推荐

最新文章

热门文章