更新记录

0.0.4（2023-04-08）

• chore: 更新文档

0.0.3（2023-04-04）

• chore: 去掉 script-setup 语法糖

0.0.2（2023-04-02）

• 更新文档，增加对vue2如何使用vue3插件的说明

平台兼容性

lime-confetti 彩纸礼炮

• uniapp vue3 canvas 彩纸礼炮
• Q群 1169785031

安装

• 在市场导入插件即可在任意页面使用，无须再import

使用

• 提供简单的使用示例，更多请查看下方的demo

<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('礼炮播放完毕')
}

查看示例

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

// 代码位于 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部分加上这一段即可,官方是把它单独成了一个文件.

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

另外插件也用到了TS，vue2可能会遇过官方的TS版本过低的问题,找到HX目录下的compile-typescript目录

// \HBuilderX\plugins\compile-typescript
yarn add typescript -D
- or - 
npm install typescript -D

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

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

API

Events

Expose

OPtions

打赏

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