# confetti

**Repository Path**: lin_xiaoran/confetti

## Basic Information

- **Project Name**: confetti
- **Description**: This is a vue confetti directive
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-12-28
- **Last Updated**: 2024-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @linxiaoran/confetti

This is a vue confetti directive

## Install

You can install this module as a component from NPM:

```bash
npm install --save @linxiaoran/confetti
```

## Usage

ES6 import:

```javascript
// main.js
import { createApp } from 'vue'
import confetti from '@linxiaoran/confetti';
import App from './App.vue'

const app = createApp(App)

app.use(confetti)
app.mount('#app')

//index.vue
<button v-confetti>click</button>  //default

<button v-confetti:200>click</button>  //throttle default 0ms

<button v-confetti="callback">click</button>  //callback

<button v-confetti="config">click</button>  //config
```

[**Click here to view the config**](https://www.kirilv.com/canvas-confetti/)

---

API:

```javascript
import { $confetti } from "@linxiaoran/confetti";

const defaultConfig = {
  particleCount: 120,
  angle: 90,
  startVelocity: 25,
  spread: 70,
  decay: 0.9,
  gravity: 1.2,
  ticks: 150,
  drift: 0,
  colors: ['#F76560', '#FADC19', '#14C9C9', '#722ED1', '#FF9A2E', '#f0a1a8', '#1ba784'],
  shapes: ['square'],
  scalar: 1,
  callback: null
}

const onCallBack = (e) => {
  $confetti(e.target, defaultConfig); //element config
};
```