This is a vue confetti directive
You can install this module as a component from NPM:
npm install --save @linxiaoran/confetti
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
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
};