Vue-luckyspin NPM

vue-luckyspin

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

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

npm.io

Instalation

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

$ yarn add vue-luckyspin

$ 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 },
  data: () => ({
    result: null
  })
}

Then just call it on your HTML section:

<template>
  <div id="app">
    <p>Example Lucky Spin</p>
    <div class="lucky-demo">
      <LuckySpin v-model="result" />
    </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
spinText	String	Spin text displayed on Spin Button.	'SPIN!'
spinSound	Boolean	Enable sound when you spin the win-wheels	false
customSpinSound	Mp3 File	Custom mp3 sound effect path	false

License

This project is licensed under the MIT License - see the LICENSE file for details.

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago