Press "Enter" to skip to content

An Easier Spinning Fortune Wheel Animation For Vue 3

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *