Animated Fortune Wheel For Vue 3

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

Preview:

Animated Fortune Wheel For Vue 3

Changelog:

07/17/2021

  • chore fix-css

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:

You Might Be Interested In:

Add Comment