LimeUI+1.2.1

主题

LimeConfetti 彩纸特效组件 ​

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

插件依赖：无

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础用法 ​

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

html
<view style="height: 750rpx;">
  <l-confetti ref="confettiRef" @done="done"></l-confetti>
</view>
<button @click="run">基础彩纸</button>
js
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('彩纸特效播放完毕')
}

多形状彩纸 ​

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

html
<view style="height: 750rpx;">
  <l-confetti ref="confettiRef"></l-confetti>
</view>
<button @click="runMultiShape">多形状彩纸</button>
js
const confettiRef = ref<LConfettiComponentPublicInstance|null>(null);
const runMultiShape = () => {
  confettiRef.value.play({
    particleCount: 150,
    spread: 80,
    shapes: ['square', 'circle', 'star'],
    origin: {
      y: 0.5
    }
  })
}

自定义颜色 ​

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

html
<view style="height: 750rpx;">
  <l-confetti ref="confettiRef"></l-confetti>
</view>
<button @click="runCustomColors">自定义颜色</button>
js
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属性以提高性能。

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

uniappx 使用 ​

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

html
<view style="height: 750rpx;">
  <l-confetti ref="confettiRef" @done="done"></l-confetti>
</view>
<button @click="run">UTS彩纸</button>
js
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)
}

快速预览 ​

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

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

插件标签说明 ​

标签名说明
l-confetti组件标签
lime-confetti演示标签

Vue2使用说明 ​

main.js中添加以下代码：

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

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

html
<view style="height: 750rpx;">
  <l-confetti ref="confettiRef" @done="done"></l-confetti>
</view>
<button @click="run">基础彩纸</button>
js
export default {
  methods: {
    run() {
      this.$refs.confettiRef.play({
        particleCount: 100,
        spread: 70,
        shapes: ['circle'],
        origin: {
          y: 0.6
        }
      })
    },
    done() {
      console.log('彩纸特效播放完毕')
    }
  }
}

API文档 ​

Events 事件 ​

事件名说明回调参数
done动画播放完成时触发-

Methods 方法 ​

方法名说明参数
play播放彩纸特效options: ConfettiOptions

ConfettiOptions 配置项 ​

参数名说明类型默认值
particleCount彩纸粒子数量number50
angle发射角度（度）number90
spread发散角度范围（度）number45
startVelocity初始速度number45
decay速度衰减系数number0.9
gravity重力系数number1
drift水平漂移系数number0
ticks动画持续的帧数number200
origin发射起始位置（相对于容器的比例）object{x: 0.5, y: 0.5}
colors彩纸颜色数组（十六进制颜色值）string[]['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42', '#ffa62d', '#ff36ff']
shapes彩纸形状数组string[]['square', 'circle']
scalar彩纸大小缩放系数number1

shapes 可选值 ​

值说明
square方形彩纸
circle圆形彩纸
star星形彩纸

origin 配置项 ​

参数名说明类型默认值
x水平位置（0-1之间，表示容器宽度的比例）number0.5
y垂直位置（0-1之间，表示容器高度的比例）number0.5

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码