v-confetti

功能

点击元素触发全屏五彩纸屑动画效果，适用于表单提交成功等场景

参数

• count: 粒子数量（默认：50）
• colors: 颜色数组（默认：彩虹七色）

使用示例

<template>
  <button v-confetti>提交</button>
  <button v-confetti="{ count: 100, colors: ['#ff0000', '#00ff00'] }">定制效果</button>
</template>

基础用法

通告给目标点击元素添加v-confetti指令，点击后会触发全屏五彩纸屑动画效果

查看代码

<script setup lang="ts">
import { vConfetti } from '@cp-vuedir/core'
</script>

<template>
  <a-card style="width: 100%; height: 20vh; display: flex; align-items: center; justify-content: center">
    <a-button v-confetti type="primary" size="large">感谢提交表单！</a-button>
  </a-card>
</template>

高级用法

可以通过count和colors参数来定制五彩纸屑动画效果

查看代码

<script setup lang="ts">
import { vConfetti } from '@cp-vuedir/core'

const loveColors = [
  '#FFB6C1',
  '#FF69B4',
  '#FF1493',
  '#DB7093',
  '#C71585',
  '#DC143C',
  '#FF0000',
  '#B22222',
  '#800000',
  '#8B0000',
  '#D02090',
  '#E75480',
  '#FF6347',
  '#FF4500',
  '#FFA07A'
]
</script>

<template>
  <a-card style="width: 100%; height: 20vh; display: flex; align-items: center; justify-content: center">
    <a-button
      v-confetti="{
        count: 521,
        colors: loveColors
      }"
      type="primary"
      shape="round"
      size="large"
      long
      >感谢提交表单！</a-button
    >
  </a-card>
</template>

<style scoped></style>

API

属性名	说明	类型	是否必选	默认值
count	屏幕中最大展示的纸屑数量，超出的部分会被自动裁剪，当然不是越多越好，会影响性能	number	○	200
colors	颜色数组，可以是十六进制颜色值，也可以是rgb或rgba颜色值，	string[]	○	彩虹七色

注意事项

• 会自动添加pointer-events: none防止点击干扰
• 动画结束后会自动移除canvas元素
• 建议在按钮点击事件处理完成后触发