A Winwheels component for VueJs

vue-lucky-spin

A Vue Lucky Spin Component base on http://dougtesting.net/home

Published on https://www.npmjs.com/package/vue-luckyspin

Instalation

run one of the following commands to add this dependency to your project:

$ yarn add vue-luckyspin

or

$ npm i --save vue-luckyspin

Usage

First import the lucky spin component on your javascript section:

import LuckySpin from 'vue-luckyspin'

export default {
  name: 'App',
  components: { LuckySpin }
}

Then just call it on your HTML section:

<template>
  <div id="app">
    <p>Example Lucky Spin</p>
    <div class="lucky-demo">
      <LuckySpin />
    </div>
  </div>
</template>

Author

• Gabriel Mazurco - Mazurco066

Demo

Go to the demo folder and run:

$ yarn install

to install dependencies and then:

$ yarn serve

to run the Vue application.

Props

Use the table below to see what props you can pass to the Component:

Props	Type	Value	Default Value
segments	Array	Use the following object array model [{ text: string, winner: boolean }…]. The winner field is optional, use it as true if you want the spin to finish on this Segment.	6 Prize’s Array
fillWithemptyPrizes	Boolean	Inform it as true if you want to fill segments with no prize Segments.	false
emptyPrizeText	String	Text that ll render if you enable the ‘fillWithemptyPrizes’ props.	‘No Prize’
textLimit	Number	maxLength for the text inside segments.	14
color1	Hex	Hexadecimal color for the primary slot.	#fadede
color2	Hex	Hexadecimal color for the secondary slot.	#000000
noPrize	Boolean	Force the WinWheel to stop in ‘noPrize’ Segment.	false
allowMultipleSpins	Boolean	Flag that allows the user to spin the Wheel multiple times, set to false to spin it once.	true
useSameColor	Boolean	Flag that set the same colors for all Segments.	false

Download Details:

Author: R4kta

Demo: http://dougtesting.net/home

Source Code: https://github.com/R4kta/vue-luckyspin

#vuejs #vue #javascript #vue-js