An easy-to-use fortune wheel component for Vue.js 3. Written in TypeScript.
How to use it:
1. Import and register the component.
import { Wheel } from 'vue3-fortune-wheel'
export default {
components: {
Wheel,
},
}
2. Add the wheel component to the template.
<Wheel />
export default {
name: "App",
components: {
Wheel,
},
data() {
return {
gift: 1,
colors: ["#7d7db3", "#c92729"],
logo: {
width: 100,
height: 120,
src:
"logo.png",
},
data: [
{
value: "Gift 1",
id: 1,
},
{
value: "Gift 2",
id: 2,
},
{
value: "Gift 3",
id: 3,
},
{
value: "Gift 4",
id: 4,
},
{
value: "Gift 5",
id: 5,
},
{
value: "Gift 6",
id: 6,
},
],
};
},
methods: {
done(params) {
console.log(params);
},
spinTheWheel() {
this.$refs.wheel.spin();
},
},
};
3. Available component props.
animDuration: {
type: Number,
default: 6000,
},
data: {
type: Object as PropType<Data>,
default: () => ({}),
validator: (data: Data): boolean => {
return data.length <= 8
},
},
gift: {
type: Number,
default: 0
},
imgParams: {
type: Object as PropType<imgParams>,
default: () => ({}),
},
Preview:
Changelog:
v1.1.37 (10/09/2022)
- Bugfixed
v1.1.0 (09/30/2022)
- feat(wheel): create a basic wheel components
- feat(img): add img on center
- Fix/add img on center
- feat(color): add color on data
- feat(color): add textColor + bgColor
- feat(build): add types + css
- feat(v-model): remove v-model use props gift
- feat(dependancies): upgrade dependancies + types
Download Details:
Author: joffreyBerrier
Live Demo: https://codesandbox.io/s/vue-wheel-rjgn0?fontsize=14&theme=dark&view=preview
Download Link: https://github.com/joffreyBerrier/vue-fortune-wheel/archive/refs/heads/main.zip
Official Website: https://github.com/joffreyBerrier/vue-fortune-wheel
Install & Download: