更新记录

0.0.4(2023-04-08) 下载此版本

  • chore: 更新文档

0.0.3(2023-04-04) 下载此版本

  • chore: 去掉 script-setup 语法糖

0.0.2(2023-04-02) 下载此版本

  • 更新文档,增加对vue2如何使用vue3插件的说明
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × ×

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

参数 说明 参数
done 动画播放完成

Expose

参数 说明 参数
play(options) 播放, options 为参数对象

OPtions

参数 说明 默认值
particleCount 纸屑数量 50
angle 发射角度 90
spread 偏离 45
startVelocity 速度 45
decay 衰变 0.9
gravity 重力 1
drift 漂移 0
ticks 移动次数 200
origin 开始发射坐标 {x: 0.5,y:0.5}
colors 颜色数组,只支持HEX []
shapes 形状,可选 square,circle,star 混合
scalar 每个纸宵的缩放因子 1

打赏

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问