Vue3 fortune wheel is an easy-to-use fortune wheel component for Vue.js 3 and written in TypeScript.
lucky draw wheel javascript, jquery spin wheel demo, spin wheel example, spinning wheel animation javascript, spin wheel game html code, spinning wheel javascript code
How to make use of 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. Component props available.
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: () => ({}), },
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
Animated Fortune Wheel, vue3 fortune wheel Plugin/Github, javascript canvas wheel of fortune
See Demo And Download
Official Website(joffreyBerrier): Click Here
This superior jQuery/javascript plugin is developed by joffreyBerrier. For extra Advanced Usages, please go to the official website.
Be First to Comment