文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3中怎么使用particles插件实现粒子背景

2023-06-29 18:22

关注

这篇文章主要介绍了vue3中怎么使用particles插件实现粒子背景的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue3中怎么使用particles插件实现粒子背景文章都会有所收获,下面我们一起来看看吧。

效果(可以修改多种不同的样式效果)

vue3中怎么使用particles插件实现粒子背景

1、安装

npm install particles.vue3

2、main.js

import { createApp } from 'vue'import App from './App.vue'import router from "./router";import Particles from "particles.vue3"; // 引入 const app = createApp(App); app.use(router).use(Particles).mount("#app");

3、页面使用

<template><div class="box"><Particles id="tsparticles" class="login-partic" :options="options" /></div></template> <script>import { reactive, toRefs } from "vue"; export default {setup(props) {const data = reactive({options: {fpsLimit: 50,interactivity: {events: {onClick: {enable: true,mode: 'push'},onHover: {enable: true,mode: 'grab'},resize: true},modes: {bubble: {distance: 400,duration: 2,opacity: 0.6,size: 10},push: {quantity: 4},repulse: {distance: 200,duration: 0.4}}},particles: {color: {value: '#ffffff'},links: {color: '#ffffff',distance: 150,enable: true,opacity: 0.5,width: 1},collisions: {enable: true},move: {direction: 'none',enable: true,outMode: 'bounce',random: false,speed: 2,straight: false},number: {density: {enable: true,value_area: 800},value: 60},opacity: {value: 0.5},shape: {type: 'circle'},size: {random: true,value: 3}},detectRetina: true}}) return {...toRefs(data),}}}</script>

 3.1、script setup下页面使用

<script setup>import { reactive, toRefs } from "vue"; const data = reactive({    options: {        fpsLimit: 50,        interactivity: {            events: {                onClick: {                    enable: true,                    mode: "push",                },                onHover: {                    enable: true,                    mode: "grab",                },                resize: true,            },            modes: {                bubble: {                    distance: 400,                    duration: 2,                    opacity: 0.6,                    size: 10,                },                push: {                    quantity: 4,                },                repulse: {                    distance: 200,                    duration: 0.4,                },            },        },        particles: {            color: {                value: "#ffffff",            },            links: {                color: "#ffffff",                distance: 150,                enable: true,                opacity: 0.5,                width: 1,            },            collisions: {                enable: true,            },            move: {                direction: "none",                enable: true,                outMode: "bounce",                random: false,                speed: 2,                straight: false,            },            number: {                density: {                    enable: true,                    value_area: 800,                },                value: 60,            },            opacity: {                value: 0.5,            },            shape: {                type: "circle",            },            size: {                random: true,                value: 3,            },        },        detectRetina: true,    },}) const { options } = toRefs(data) // 直接解构出来,页面上就不用data.options了</script>

关于“vue3中怎么使用particles插件实现粒子背景”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue3中怎么使用particles插件实现粒子背景”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯