更新记录

0.0.7（2025-02-25）

• feat: 兼容uniappx

0.0.6（2024-11-28）

• feat: 增加销毁

0.0.5（2024-11-22）

• feat: 增加renderjs

平台兼容性

lime-confetti 彩纸特效

• 彩纸特效，多形状颜色，打造炫动庆祝场景

安装

插件市场导入即可

文档

彩纸特效

代码演示

使用

• 提供简单的使用示例，更多请查看下方的demo
• app 存在通讯损耗，可以加上renderjs这个属性使用renderjs渲染

  <view style="height: 750rpx;">
  <l-confetti ref="confettiRef" @done="done"></l-confetti>
  </view>
  <button @click="run1">basice cannon</button>

  const confettiRef = ref(null)
  const run1 = () => {
  confettiRef.value.play({
      particleCount: 100,
      spread: 70,
      shapes: ['circle'],
      origin: {
          y: 0.6
      }
  })
  }
  const done = () => {
  console.log('礼炮播放完毕')
  }

Uvue

<view style="height: 750rpx;">
    <l-confetti ref="confettiRef" @done="done"></l-confetti>
</view>
<button @click="run1">basice cannon</button>

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

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

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

查看示例

• 导入后直接使用这个标签查看演示效果

// 代码位于 uni_modules/lime-confetti/compoents/lime-confetti
<lime-confetti />

插件标签

• 默认 l-confetti 为 component
• 默认 lime-confetti 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可

  // vue2
  import Vue from 'vue'
  import VueCompositionAPI from '@vue/composition-api'
  Vue.use(VueCompositionAPI)

<view style="height: 750rpx;">
    <l-confetti ref="confettiRef" @done="done"></l-confetti>
</view>
<button @click="run1">basice cannon</button>

const run1 = () => {
    this.$refs.confettiRef.play({
        particleCount: 100,
        spread: 70,
        shapes: ['circle'],
        origin: {
            y: 0.6
        }
    })
}
const done = () => {
    console.log('礼炮播放完毕')
}

API

Events

Expose

OPtions

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。