更新记录

0.0.9（2025-08-31）

• chore: 更新文档

0.0.8（2025-04-27）

• feat: 兼容uniappx 鸿蒙next

0.0.7（2025-02-25）

• feat: 兼容uniappx

平台兼容性

uni-app(4.74)

uni-app x(4.75)

lime-confetti 彩纸特效组件

一个用于创建庆典、成功反馈等场景的粒子动画效果组件。支持多种形状、颜色和动画参数配置，可用于游戏胜利、活动庆祝、成就达成等多种场景。组件提供了丰富的自定义选项，可以满足各种炫动的庆祝效果需求。

插件依赖：无

文档链接

📚 组件详细文档请访问以下站点：

• 彩纸特效组件文档 - 站点1
• 彩纸特效组件文档 - 站点2
• 彩纸特效组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-confetti
2. 导入后可能需要重新编译项目
3. 在页面中使用l-confetti组件

代码演示

基础用法

最简单的彩纸特效组件用法，设置基本参数即可。

<view style="height: 750rpx;">
  <l-confetti ref="confettiRef" @done="done"></l-confetti>
</view>
<button @click="run">基础彩纸</button>

const confettiRef =  ref<LConfettiComponentPublicInstance|null>(null);
const run = () => {
  confettiRef.value.play({
    particleCount: 100,
    spread: 70,
    shapes: ['circle'],
    origin: {
      y: 0.6
    }
  })
}
const done = () => {
  console.log('彩纸特效播放完毕')
}

多形状彩纸

可以设置不同的形状，包括方形、圆形和星形。

<view style="height: 750rpx;">
  <l-confetti ref="confettiRef"></l-confetti>
</view>
<button @click="runMultiShape">多形状彩纸</button>

const confettiRef = ref<LConfettiComponentPublicInstance|null>(null);
const runMultiShape = () => {
  confettiRef.value.play({
    particleCount: 150,
    spread: 80,
    shapes: ['square', 'circle', 'star'],
    origin: {
      y: 0.5
    }
  })
}

自定义颜色

可以自定义彩纸的颜色，通过colors数组设置。

<view style="height: 750rpx;">
  <l-confetti ref="confettiRef"></l-confetti>
</view>
<button @click="runCustomColors">自定义颜色</button>

const confettiRef = ref(null)
const runCustomColors = () => {
  confettiRef.value.play({
    particleCount: 100,
    spread: 70,
    colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'],
    origin: {
      y: 0.6
    }
  })
}

在uniapp App中使用

在App环境中，可以添加renderjs属性以提高性能。

<view style="height: 750rpx;">
  <l-confetti ref="confettiRef" renderjs @done="done"></l-confetti>
</view>
<button @click="run">App彩纸</button>

uniappx 使用

在uniappx 环境中使用时，需要导入相关类型。

<view style="height: 750rpx;">
  <l-confetti ref="confettiRef" @done="done"></l-confetti>
</view>
<button @click="run">UTS彩纸</button>

import type { ConfettiOptions } from '@/uni_modules/lime-confetti'
const confettiRef = ref<LConfettiComponentPublicInstance|null>(null);

const done = () => {
  console.log('完成了!')
}

const run = () => {
  confettiRef.value?.play?.({
    particleCount: 100,
    spread: 70,
    shapes: ['circle'],
    origin: {
      y: 0.6,
      x: 0.5
    }
  } as ConfettiOptions)
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-confetti/components/lime-confetti -->
<lime-confetti />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

<view style="height: 750rpx;">
  <l-confetti ref="confettiRef" @done="done"></l-confetti>
</view>
<button @click="run">基础彩纸</button>

export default {
  methods: {
    run() {
      this.$refs.confettiRef.play({
        particleCount: 100,
        spread: 70,
        shapes: ['circle'],
        origin: {
          y: 0.6
        }
      })
    },
    done() {
      console.log('彩纸特效播放完毕')
    }
  }
}

API文档

Events 事件

Methods 方法

ConfettiOptions 配置项

shapes 可选值

origin 配置项

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助