Skip to content
This repository was archived by the owner on Aug 28, 2026. It is now read-only.

Repository files navigation

vue-ba-spark

npm vue stars issues license

English | 简体中文

把蔚蓝档案风格的粒子效果从 DoomVoss/BASpark 移植到 Vue 3

使用

注册为全局组件

import { createApp } from 'vue';
import App from './App.vue';
import BASpark from 'vue-ba-spark';

const app = createApp(App);
app.component('BASpark', BASpark);
app.mount('#app');

组件中导入

<script setup>
import BASpark from 'vue-ba-spark';
</script>
<template>
  <BASpark />
</template>

组件属性

你可以像 canvas 元素一样传参给 BASpark 组件,就像这样:

<BASpark title="VUE-BASPARK" style="border: 1px solid deepskyblue;" />

你也可以传递 opts 属性给 BASpark 组件来自定义效果。

选项 类型 默认值 描述
color string 45,175,255 效果(点击特效和鼠标轨迹)的主要颜色,格式为r,g,b
scale number 1 效果的缩放比例
opacity number 1 效果的透明度
speed number 1 动画速度
maxTrail number 16 最大轨迹长度
alwaysTrail boolean false 在鼠标未按下时也显示轨迹
showFPS boolean false 显示帧率

Star History

Star History Chart

About

把蔚蓝档案风格的粒子效果从 DoomVoss/BASpark 移植到 Vue 3 | Blue Archive Style Particle Effect port to vue3 from DoomVoss/BASpark

Resources

Stars

5 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages