@linxiaoran/confetti

This is a vue confetti directive

Install

You can install this module as a component from NPM:

npm install --save @linxiaoran/confetti

Usage

ES6 import:

// 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

API:

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
};