@skhrvg/vue3-fortune-wheel
TypeScript icon, indicating that this package has built-in type declarations

1.0.0Β β€’Β PublicΒ β€’Β Published

vue3-fortune-wheel

πŸ‘Š An easier fortune-wheel in Vue.js πŸ‘Š

πŸ”₯ Vue3 + Typescript πŸ”₯

Sandbox example

Open this link on a new tab

Edit vue-wheel

Installation

NPM / YARN

Install the package:

npm install vue3-fortune-wheel --save
yarn add vue3-fortune-wheel
import { Wheel } from "vue3-fortune-wheel";
// If you using vite
import 'vue3-fortune-wheel/style'
// If you not
import 'vue3-fortune-wheel/dist/library.css'

export default {
  components: {
    Wheel,
  },
};
<Wheel />

Props/Options

Gift

  • Type: Number
  • Default: null

This data corresponds to the id of your winning object. In my case an API returns me the id. If you are not in this case you can create a method that randomly chooses an id

Exemple of this method

randomGift() {
  return Math.floor(Math.random() * this.data.lengh) + 1
}

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

Example :

data: [
  {
    id: 1,
    value: "Gift 1",
    color: '#7d7db3',
    bgColor: '#ffffff'
  },
  {
    id: 2,
    value: "Gift 2",
    color: '#ffffff',
    bgColor: '#ffffff'
  },
  {
    id: 3,
    value: "Gift 3",
    color: '#c92729',
    bgColor: '#ffffff'
  },
],

ImgParams

  • Type: Object
  • Default: {}

Possible to add an image in the center

Example :

  {
    src: string
    width: number
    height: number
  }

Contributing to development πŸ’β€β™‚οΈπŸ’β€β™€οΈ

  • First create an issue
  • Fork the repo from github.
  • Clone your forked repo and run: yarn or npm i
  • Then, make your changes on any branch you want and push it.
  • Naming your branch with the gitflow convention:
    • Feature branches? [feature/issueId]
    • Release branches? [release/issueId]
    • Hotfix branches? [hotfix/issueId]
    • Support branches? [support/issueId]
  • Finally, open a pull request on the official repo, using the source branch from your forked repo.

Install

npm i @skhrvg/vue3-fortune-wheel

DownloadsWeekly Downloads

1

Version

1.0.0

License

none

Unpacked Size

105 kB

Total Files

14

Last publish

Collaborators

  • skhrvg