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}
}
相关文章:
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)//使用粒子特效 页面使用 <sc…...
DMDEM部署说明-详细步骤-(DM8达梦数据库)
DMDEM部署说明-详细步骤-DM8达梦数据库 环境介绍1 部署DM8 数据库1.1 创建一个数据库作为DEM后台数据库1.2 创建数据库用户 DEM1.3 使用DEM用户导入dem_init.sql 2 配置tomcat2.1 配置/tomcat/conf/server.xml2.2 修改jvm启动参数 3 配置JAVA 1.8及以上版本的运行时环境3.1 配置…...
aws亚马逊:什么是 Amazon EC2?
Amazon Elastic Compute Cloud(Amazon EC2)在 Amazon Web Services(AWS)云中按需提供可扩展的计算容量。使用 Amazon EC2 可以降低硬件成本,因此您可以更快地开发和部署应用程序。您可以使用 Amazon EC2 启动所需数量的…...
【BMC】jsnbd介绍
jsnbd介绍 本文主要介绍一个名为jsnbd的开源项目,位于GitHub - openbmc/jsnbd,它实现了一个前端(包含HTML和JS文件)页面,作为存储服务器,可以指定存储内容;还包含一个后端的代理,这…...
个推「数据驱动运营增长」上海专场:携程智行火车票分享OTA行业的智能用户运营实践
近日,以“数据增能,高效提升用户运营价值”为主题的个推「数据驱动运营增长」城市巡回沙龙上海专场圆满举行。携程智行火车票用户运营负责人王银笛分享OTA行业的智能用户运营实践。 ▲ 王银笛 携程智行火车票用户运营负责人 负责智行业务线用户运营。从0…...
Linux--gcc/g++
一、gcc/g是什么 gcc的全称是GNU Compiler Collection,它是一个能够编译多种语言的编译器。最开始gcc是作为C语言的编译器(GNU C Compiler),现在除了c语言,还支持C、java、Pascal等语言。gcc支持多种硬件平台 二、gc…...
MySQL5.7源码编译安装
查看是否安装过mysql软件包 rpm -qa|grep mysql rpm -qa|grep mariadb rpm -e --nodeps mysql的软件包名建立mysql账号 useradd -s /sbin/nologin -M mysql安装依赖包 yum install -y gcc yum install -y gcc-c yum install -y ncurses yum install -y bison yum install -y…...
uniapp使用v-for页面不刷新解决办法
项目场景: 做一个项目,v-for循环数据库数据,使用uni-load-more,结果发现... DOM中的列表却没有更新 解决方案: 根据网上教程,加了一个触底函数onReachBottom,结果发现无论如何也更新不了DOM中…...
发布一款将APM日志转换为Excel的开源工具
这几年有不少朋友向我咨询如何将APM日志转换为Excel,我之前的答复是先将日志转换为MATLAB的格式,然后用MATLAB导出为Excel。但是实际上不是每个人都会用MATLAB,并且处理数据也不是非要用MATLAB,更不是说用MATLAB了就显得专业、显得…...
本地化小程序运营 同城小程序开发
时空的限制让本地化的线上平台成为一种追求,58及某团正式深挖人们城镇化、本地化的信息和商业需求而崛起的平台,将二者结合成本地化小程序,显然有着巨大的市场机会。本地化小程序运营可以结合本地化生活需求的一些信息,以及激发商…...
关于electron打包卡在winCodeSign下载问题
简单粗暴,直接上解决方案: 在你的项目根目录下创建一个.npmrc的文件,且在里面加上以下文本,不用在意这个镜像源是不是最新的,它会自己重定向到nodemirror这个域名里下载 ELECTRON_MIRRORhttps://npm.taobao.org/mirror…...
01_ddim_inversion_CN
DDIM反转 设置 # !pip install -q transformers diffusers accelerateimport torch import requests import torch.nn as nn import torch.nn.functional as F from PIL import Image from io import BytesIO from tqdm.auto import tqdm from matplotlib import pyplot as p…...
ElasticSearch的文档、字段、映射和高级查询
1. 文档(Document) 在ES中一个文档是一个可被索引的基础信息单元,也就是一条数据 比如:你可以拥有某一个客户的文档,某一个产品的一个文档,当然,也可以拥有某个订单的一个文档。文档以JSON&…...
vim相关命令讲解!
本文旨在讲解vim 以及其相关的操作! 希望读完本文,读者会有一定的收获!好的,干货马上就来! 初识vim 在讲解vim之前,我们首先要了解vim是什么,有什么作用?只有了解了vim才能更好的理…...
22.构造一个关于员工信息的结构体数组,存储十个员工的信息
结构体问题。构造一个关于员工信息的结构体数组,存储十个员工的信息,包括员工工号,员工工资,员工所得税,员工实发工资。要求工号和工资由键盘输入,并计算出员工所得税(所得税工资*0.2࿰…...
calico
calico:默认是ip-ip模式, ipip 开销小 vxlan模式:后期版本才支持 不会创建虚拟交换机 Calico 是一种用于构建和管理容器网络的开源软件定义网络(SDN)解决方案。它专门设计用于在容器和虚拟机之间提供高性能、高可扩展性和灵活的…...
web前端开发第3次Dreamweave课堂练习/html练习代码《网页设计语言基础练习案例》
目标图片: 文字素材: 网页设计语言基础练习案例 ——几个从语义上和文字相关的标签 * h标签(h1~h6):用来定义网页的标题,成对出现。 * p标签:用来设置网页的段落,成对出现。 * b…...
APP备案获取安卓app证书公钥获取方法和签名MD5值
前言 在开发和发布安卓应用程序时,了解应用程序证书的公钥和签名MD5值是很重要的。这些信息对于应用程序的安全性和合规性至关重要。现在又因为今年开始APP必须接入备案才能在国内各大应用市场上架,所以获取这两个值成了所有开发者的必经之路。本文将介…...
cefsharp 93.1.140 如何在js中暴露c#类
从cefsharp79版本开始,旧的RegisterJsObject方法被删除了。 也就是说想使用79以后的版本,就必须更新js暴露c#对象的方法了。由于79之前的注册方法是不需要在js中进行注册的,在93版本上如何在不改动前端页面的基础上实现内核升级咧,…...
Youtu-VL-4B-Instruct WebUI部署教程:Nginx反向代理配置+HTTPS安全访问完整方案
Youtu-VL-4B-Instruct WebUI部署教程:Nginx反向代理配置HTTPS安全访问完整方案 1. 引言:为什么需要反向代理和HTTPS? 如果你已经成功部署了Youtu-VL-4B-Instruct的WebUI,现在可以直接通过 http://服务器IP:7860 访问,…...
避坑指南:YOLOv5单目测距项目里,为什么你的距离值总是不准?
YOLOv5单目测距实战:五大误差源深度解析与精准优化方案 当你兴奋地跑通了YOLOv5单目测距代码,却发现测量结果与实际距离相差甚远时,这种挫败感我深有体会。本文将带你系统排查那些容易被忽视的关键误差源,并提供可直接落地的解决方…...
Jupyter Notebook机器学习避坑指南:为什么你的泰坦尼克号预测模型准确率虚高?
Jupyter Notebook机器学习避坑指南:为什么你的泰坦尼克号预测模型准确率虚高? 在数据科学竞赛和实际业务场景中,泰坦尼克号数据集堪称机器学习界的"Hello World"。但正是这个看似简单的数据集,却暗藏诸多陷阱。许多学习…...
OpenClaw自动化测试:Qwen3.5-9B生成与执行Python脚本
OpenClaw自动化测试:Qwen3.5-9B生成与执行Python脚本 1. 为什么选择OpenClawQwen3.5做代码自动化 去年我在处理一个数据清洗项目时,每天要反复执行十几个相似的Python脚本。当我第一次看到OpenClaw的"自然语言生成代码自动执行"演示时&#…...
KingBaseES三权分立机制深度解析:系统管理员vs安全管理员vs审计员的权限管控实践
KingBaseES三权分立机制深度解析:系统管理员vs安全管理员vs审计员的权限管控实践 在金融、政务等对数据安全要求极高的行业,数据库权限管控体系的设计直接关系到核心数据资产的安危。作为国产数据库的领军者,KingBaseES创新性地采用"三权…...
SpringBoot集成Sqlite3+mybatisPlus+Druid实战指南与避坑手册
1. 为什么选择Sqlite3MybatisPlusDruid组合 在轻量级应用开发中,Sqlite3因其零配置、无服务器的特性成为嵌入式数据库的首选。我去年开发一个物联网设备管理系统时,就遇到过需要本地存储设备运行数据的场景。当时尝试过H2和Derby,最终发现Sql…...
OpenClaw+千问3.5-35B-A3B-FP8:智能邮件分类回复系统
OpenClaw千问3.5-35B-A3B-FP8:智能邮件分类回复系统 1. 为什么需要自动化邮件处理 每天早晨打开邮箱,看到堆积如山的未读邮件时,那种窒息感我太熟悉了。作为技术从业者,我的邮箱常年被订阅的技术周报、开源项目更新、会议邀请函…...
OpenClaw内存泄漏排查:Qwen3-32B长会话任务监控与优化
OpenClaw内存泄漏排查:Qwen3-32B长会话任务监控与优化 1. 问题背景:当OpenClaw遇上长会话任务 上周我尝试用OpenClaw自动化处理一批技术文档的摘要生成工作。这个任务需要连续处理上百个Markdown文件,每个文件都需要调用Qwen3-32B模型进行多…...
STC51单片机串口ISP下载程序全攻略
1. STC51单片机ISP串口下载程序详解作为一名嵌入式开发工程师,我经常需要给各种单片机下载程序。STC51系列单片机因其性价比高、开发简单而广受欢迎。今天我就来详细讲解STC51单片机通过串口ISP下载程序的全过程,包括硬件连接、软件配置和常见问题处理。…...
【LeetCode刷题日记】:反转链表(面试基础考察)
🔥个人主页:北极的代码(欢迎来访) 🎬作者简介:java后端学习者 ❄️个人专栏:苍穹外卖日记,SSM框架深入,JavaWeb ✨命运的结局尽可永在,不屈的挑战却不可须臾或…...
