Hello Guys, today I am going to Introduce you another most exciting GitHub repository an easy-to-use Fortune in Vue.js.
vue3-fortune-wheel:
An easier fortune-wheel in Vue.js
Installation:
NPM / YARN
Install the package:
npm install vue3-fortune-wheel --save
yarn add vue3-fortune-wheel
import { Wheel } from 'vue3-fortune-wheel'
export default {
components: {
Wheel,
},
}
<Wheel />Props/Options
Gift
- Type:
Number - Default:
null
This data corresponds to the id of your winning object. In my case an API returns me the id. If you are not in this case you can create a method that randomly chooses an id
Example of this method:
randomGift() {
return Math.floor(Math.random() * this.data.lengh) + 1
}animDuration
- Type:
Number - Default:
5000
How many millisecondes you want the wheel to turn
Data
- Type:
Array - Default:
[] - id:
number - value:
string - color:
string - bgColor:
string
Example :
data: [
{
id: 1,
value: "Gift 1",
color: '#7d7db3',
bgColor: '#ffffff'
},
{
id: 2,
value: "Gift 2",
color: '#ffffff',
bgColor: '#ffffff'
},
{
id: 3,
value: "Gift 3",
color: '#c92729',
bgColor: '#ffffff'
},
],
ImgParams:
- Type:
Object - Default:
{}
Possible to add an image in the center.
Example:
{
src: string
width: number
height: number
}Please comment and share this GitHub repository and wants to add or submit your repository WhatsApp us.
