@u88888888/vue-pickaxe-fluid

Vue 3 鼠标移动肥皂泡流体特效组件（基于 @u88888888/pickaxe-fluid）。

安装

npm install @u88888888/vue-pickaxe-fluid @u88888888/pickaxe-fluid

@u88888888/pickaxe-fluid 为核心依赖，需一并安装。

快速开始

在 App.vue 或布局组件中添加：

<script setup>
import { PickaxeFluid } from '@u88888888/vue-pickaxe-fluid'
</script>

<template>
  <PickaxeFluid />
  <!-- 你的页面内容 -->
</template>

Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | enabled | boolean | true | 是否启用特效 | | zIndex | number | 9999 | Canvas 层级 | | showHint | boolean | true | WebGL 不支持时显示提示 |

示例

<PickaxeFluid :enabled="true" :z-index="9999" :show-hint="false" />

Nuxt 3

需客户端渲染：

<template>
  <ClientOnly>
    <PickaxeFluid />
  </ClientOnly>
</template>

<script setup>
import { PickaxeFluid } from '@u88888888/vue-pickaxe-fluid'
</script>

SSR 说明

组件内部在 onMounted 后初始化 WebGL，不要在服务端渲染阶段直接操作 canvas。

高级用法

也可直接调用底层 API（同样从本包导出）：

import { initPickaxeFluid } from '@u88888888/vue-pickaxe-fluid'

const canvas = document.querySelector('canvas')
const dispose = initPickaxeFluid(canvas)

// 销毁
dispose?.()

交互效果

• 鼠标移动：彩虹肥皂泡流体轨迹
• 鼠标点击：爆发 splat 效果
• Canvas 全屏固定，pointer-events: none，不阻挡页面点击

环境要求

• Vue 3.3+
• 支持 WebGL2 的桌面浏览器
• 移动端 / 触屏设备效果有限

常见问题

看不到效果？

1. 硬刷新（Cmd + Shift + R / Ctrl + Shift + R）
2. 确认桌面浏览器且支持 WebGL2
3. 移动鼠标或点击页面启动动画

与页面层级冲突？

调低 z-index prop，或将组件放在布局最外层。

相关包

• 核心库：@u88888888/pickaxe-fluid
• React 版：@u88888888/react-pickaxe-fluid

License

MIT