1.1.37 ā¢ Published 2 years ago
vue3-fortune-wheel v1.1.37
vue3-fortune-wheel @1.1.6
š 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";
import type { Datas, imgParams } from "vue3-fortune-wheel";
export default {
components: {
Wheel,
},
};
<Wheel
:gift="gift"
:imgParams="logo"
@done="done"
ref="wheel"
v-model="data"
/>
How to launch the Wheel ?
<template>
<Wheel
:gift="gift"
:imgParams="logo"
@done="done"
ref="wheel"
v-model="data"
/>
</template>
<script>
export default defineComponent({
setup() {
const wheel = ref(null);
const launchWheel = () => {
wheel.value.spin();
};
return { launchWheel }
}
})
<script>
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
ModelValue
- 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.1.1
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.34
2 years ago
1.1.33
2 years ago
1.1.32
2 years ago
1.1.31
2 years ago
1.1.37
2 years ago
1.1.36
2 years ago
1.1.35
2 years ago
1.1.0
2 years ago
1.0.0
3 years ago
0.0.5
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.4
3 years ago
0.0.31
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago