Animated Fortune Wheel For Vue 3

Install & Download:

Description:

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: () => ({}),
},