1.0.0 ā¢ Published 2 years ago
@skhrvg/vue3-fortune-wheel v1.0.0
vue3-fortune-wheel
š An easier fortune-wheel in Vue.js š
š„ Vue3 + Typescript š„
Sandbox example
Open this link on a new tab
Installation
NPM / YARN
Install the package:
npm install vue3-fortune-wheel --save
yarn add vue3-fortune-wheel
import { Wheel } from "vue3-fortune-wheel";
// If you using vite
import 'vue3-fortune-wheel/style'
// If you not
import 'vue3-fortune-wheel/dist/library.css'
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
Exemple 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
}
Contributing to development šāāļøšāāļø
- First create an issue
- Fork the repo from github.
- Clone your forked repo and run:
yarn
ornpm i
- Then, make your changes on any branch you want and push it.
- Naming your branch with the gitflow convention:
- Feature branches? feature/issueId
- Release branches? release/issueId
- Hotfix branches? hotfix/issueId
- Support branches? support/issueId
- Finally, open a pull request on the official repo, using the source branch from your forked repo.
1.0.0
2 years ago