@zhaomushan/border-ball

Vue 3 组件：小球沿页面四边顺时针滚动，足迹为线性渐变淡出，支持导出当前画布 PNG。

安装

npm install @zhaomushan/border-ball vue

使用

<script setup lang="ts">
import { ref } from "vue";
import { BorderBall } from "@zhaomushan/border-ball";
import "@zhaomushan/border-ball/style.css";

const ballRef = ref<InstanceType<typeof BorderBall> | null>(null);

function save() {
  ballRef.value?.downloadPng("my-trail.png");
}
</script>

<template>
  <BorderBall ref="ballRef" :trail-fade-ms="100" />
  <button type="button" @click="save">下载 PNG</button>
</template>

Props

| 属性 | 说明 | 默认 | |------|------|------| | modelValue / active | 是否显示并运行动画 | true | | speed | 沿边速度 px/s | 320 | | ballRadius | 球半径 | 14 | | trailFadeMs | 足迹渐变时长（毫秒），如 0.1 为极短拖尾 | 100 | | trailColor / ballColor | 颜色 | 见源码默认 |

方法（ref）

• downloadPng(filename?) — 下载当前画面为 PNG

构建

cd packages/border-ball && npm run build