vue3使用粒子特效

安装

//使用npm安装
npm install particles.vue3 --save//使用yarn安装
yarn add particles.vue3 --save//必须得装
npm i tsparticles

使用

main.js

import Particles from 'particles.vue3'
const app = createApp(App)
app.use(Particles)//使用粒子特效

页面使用

<script setup>
import config from "@/views/login/config.js"
import { ref, reactive, toRefs, onMounted } from "vue";import { loadFull } from "tsparticles"
console.log(config,'particles');
const options = reactive(config.particles);
const particlesInit = async (engine) => {await loadFull(engine)
}const particlesLoaded = async (container) => {console.log('粒子效果加载完成时触发', container)
}
</script>
<template><div class="container-page"><Particlesid="tsparticles":particlesInit="particlesInit":particlesLoaded="particlesLoaded":options="options"/></div>
</template>
<style scoped >
.container-page {background-image: url("");background-repeat: no-repeat;background-size: cover;height: 100vh;width: 100vw;position: relative;
}
</style>

配置

export default {particles:{background: {color: {// value: '#2d3a4b' // 粒子颜色,如果有图片背景记得注释掉不然会覆盖背景}},fpsLimit: 60,interactivity: {events: {onClick: {enable: true,mode: 'push' // 可用的click模式有: "push", "remove", "repulse", "bubble"。},onHover: {enable: true,mode: 'grab' // 可用的hover模式有: "grab", "repulse", "bubble"。},resize: true},modes: {bubble: {distance: 400,duration: 2,opacity: 0.8,size: 40},push: {quantity: 4},repulse: {distance: 200,duration: 0.4}}},particles: {color: {value: '#ffffff'},links: {color: '#ffffff', // '#dedede'。线条颜色。distance: 150, // 线条长度enable: true, // 是否有线条opacity: 0.5, // 线条透明度。width: 1 // 线条宽度。},collisions: {enable: false},move: {direction: 'none',enable: true,outMode: 'bounce',random: false,speed: 1, // 粒子运动速度。straight: false},number: {density: {enable: true,area: 800},value: 80 // 粒子数量。},opacity: {value: 0.5 // 粒子透明度。},shape: {type: 'star' // 可用的粒子外观类型有:"circle","edge","triangle", "polygon","star"},size: {random: true,value: 5}},detectRetina: true}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/141275.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VScode配置C/C++环境

文章目录 一、下载MinGW二、配置环境变量三、VScode配置四、验证 一、下载MinGW MinGW官网 划到最下面找 二、配置环境变量 解压后放到自己想放的目录下 右键 此电脑–>属性–>高级系统设置—>环境变量–> 在cmd命令行检测&#xff0c;出现如下界面&#xff1a;…

小程序day05

使用npm包 Vant Weapp 类似于前端boostrap和element ui那些的样式框架。 安装过程 注意:这里建议直接去看官网的安装过程。 vant-weapp版本最好也不要指定 在项目目录里面先输入npm init -y 初始化一个包管理配置文件: package.json 使用css变量定制vant主题样式&#xff0…

纯手写 模态框、消息弹框、呼吸灯

在有些做某些网页中&#xff0c;应用不想引用一些前端框架&#xff0c;对于一些比较常用的插件可以纯手写实现 1、模态框 <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>Water Ripple Effect</title> <style…

easyExcel使用场景

在项目开发中往往需要使用到数据的导入和导出&#xff0c;导入就是从Excel中导入到DB中&#xff0c;而导出就是从DB中查询数据然后使用POI写到Excel上。 大数据的导入和导出&#xff0c;相信大家在日常的开发、面试中都会遇到。 很多问题只要这一次解决了&#xff0c;总给复盘记…

MySQL如何查找删除重复行?

如何查找重复行 第一步是定义什么样的行才是重复行。多数情况下很简单&#xff1a;它们某几列具有相同的值。本例采用这种定义&#xff0c;或许你对“重复”的定义得很复杂&#xff0c;你需要对sql做些修改。本例要用到的数据样本&#xff1a; create table test(id int not …

mmap如何运用

mmap是什么 mmap是C语言中的一个系统调用&#xff0c;它允许程序将一个文件或者其他的对象映射到进程的地址空间。这种机制使得进程可以直接读取和修改被映射的对象&#xff0c;而不需要通过I/O系统调用来访问。 mmap的主要用途包括&#xff1a; * 将一个普通文件映射到内存中…

解析JSON字符串:属性值为null的时候不被序列化

如果希望属性值为null及不序列化&#xff0c;只序列化不为null的值。 1、测试代码 配置代码&#xff1a; mapper.setSerializationInclusion(JsonInclude.Include.NON_NULL); 或者通过注解JsonInclude(JsonInclude.Include.NON_NULL) //常见问题2&#xff1a;属性为null&a…

C++——gcc、clang和cmake以及make

文章目录 1. CMake和make1.1 生成内容区别1.2 CMakeLists.txt和Makefile内容比较2. clang, gcc和make2.1 基本概念2.2 改进历史(gcc,make,cmake,Ninja)1. CMake和make 1.1 生成内容区别 环境CMake生成最终生成WindowsXXX.slnVisual Studio(MSBuild)处理.sln生成.exe可执行二进…

【数据结构】树与二叉树(七):二叉树的遍历(先序、中序、后序及其C语言实现)

文章目录 5.2.1 二叉树二叉树性质引理5.1&#xff1a;二叉树中层数为i的结点至多有 2 i 2^i 2i个&#xff0c;其中 i ≥ 0 i \geq 0 i≥0。引理5.2&#xff1a;高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点&#xff0c;其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…

Oracle Unifier 22.12 ~ 23.10 功能改进清单表

序言 时隔近一年&#xff0c;Oracle Unifier 22还没握熟&#xff0c;新版本23便已迭代到23.10&#xff0c;根据甲骨文常规的发布规律&#xff0c;相信不久之后便会正式迎来正式本地版V23&#xff0c;了解Unfier的朋友或许知晓&#xff0c;本地版是云版迭代一年后的版本&#x…

【PG】PostgreSQL 目录结构

目录 1 软件安装目录 2 数据文件目录 base/&#xff1a;存储每个数据库的基本数据文件 global/&#xff1a;包含了全局性质的系统表空间文件 pg_tblspc/&#xff1a;包含了表空间的符号链接 pg_twophase/&#xff1a;包含了两阶段提交中使用的文件 pg_stat_tmp/&#xff…

【系统架构设计】架构核心知识: 3.3 DSSA和ABSD

目录 一 特定领域软件架构DSSA 1 DSSA 2 DSSA的基本活动和产物 3 参与DSSA的人员 4 建立过程

Power Automate-创建计划的云端流

选择第三个计划的云端流 根据实际需求选择开始日期和间隔时间 点击创建 测试运行 点击右上角的测试 选择手动&#xff0c;点击测试&#xff0c;然后运行流 运行失败会有报错原因

springboot引入外部jar,package打包报错找不到程序包XXX

springboot引入外包jar包有两种方法&#xff1a; 一、第一种&#xff1a; 点击idea左上角file&#xff0c;然后点击project选择Modules&#xff0c;点击右侧Dependencies&#xff0c;点击右侧加号选择JARs or directories,然后选择要导入的jar包。这种方式&#xff0c;引入ja…

java网络编程之UDP协议

文章目录 UDP简介一发一收客户端&#xff1a;服务端&#xff1a; 多发多收实现多开客户端&#xff1a;服务端 UDP简介 UDP&#xff08;User Datagram Protocol&#xff09; DatagramSocket 用于创建客户端、服务端DatagramSocket() :创建客户端的Socket对象&#xff0c;系统随…

异常、堆内存溢出、OOM的几种情况【转载】

1、堆内存溢出 【情况一】&#xff1a;   java.lang.OutOfMemoryError: Java heap space&#xff1a;这种是java堆内存不够&#xff0c;一个原因是真不够&#xff0c;另一个原因是程序中有死循环&#xff1b;   如果是java堆内存不够的话&#xff0c;可以通过调整JVM下面…

ubuntu安装mysql8.0.35过程和报错处理

ubuntu安装mysql8.0.35过程 1.更新包列表&#xff1a;首先&#xff0c;确保您的系统已更新到最新状态。运行以下命令来更新包列表和安装最新的软件包&#xff1a; sudo apt update sudo apt upgrade2.安装MySQL服务器&#xff1a;运行以下命令来安装MySQL服务器&#xff1a; …

深度学习模型基于Python+TensorFlow+Django的垃圾识别系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 要使用Python、TensorFlow和Django构建一个垃圾识别系统&#xff0c;您可以按照以下步骤进行操作&#xff1a; 安装…

vite + electron引入itk报错

代码 import { readImageArrayBuffer } from itk-wasm console.log(readImageArrayBuffer)通过itk-wasm官网&#xff0c;创建新的项目vitevue&#xff08;vue2或者vue3&#xff09;&#xff0c;都没问题。加入electeon后包此错。通过排查&#xff0c;意外找到原因&#xff0c;…

ES常用查询命令

一、基本命令 1、获取所有_cat命令 curl -X GET localhost:9200/_cat 2、获取es集群服务健康状态 curl -X GET localhost:9200/_cat/health?v epoch: 时间戳的 Unix 时间戳格式&#xff0c;表示快照生成的时间。 timestamp: 可读性更强的时间戳格式&#xff0c;表示快照生…