vue-raffle-wheel

A raffle wheel component based on Barney Parker's codepen: https://codepen.io/barney-parker/pen/OPyYqy

Installation

npm i vue-raffle-wheel -S

Usage

Global

import RaffleWheel from "vue-raffle-wheel";
// Some Other Code
Vue.use(RaffleWheel);

Individual Component

import RaffleWHeel from "vue-raffle-wheel";
export default {
  name: "my-component"
  ...otherSetup,
  components: { RaffleWheel },
}

In Template

<template>
  <div class="wrapper">
    <RaffleWheel
      :options="[
        'Shaggy',
        'Scooby',
        'Thelma',
        'Daphne',
        'Fred',
        'The Rest of the Gang',
      ]"
    />
  </div>
</template>

Available Props

Prop	Type	Name	Default Value	Required
options	Array	An array of values to appear in the slices of the wheel. Optionally can be an array of objects with a text value for display color value equal to the hex value of the desired background color for the slice, and fontColor equal to the hex value of the desired font color for the slice (see color options for details).	[]	*
slicesFont	Object	An object containing 3-4 values: style, size, family, and optionaly color(see color options for details) used to style the font in the slices of the wheel.	{ style: "bold", size: "12px", family: "Helvetica, Arial", }
hubFont	Object	An object containing 3-4 values: style, size, family, and optionaly color(see color options for details) used to style the font in the hub (center) of the wheel.	{ style: "bold", size: "30px", family: "Helvetica, Arial", }
blockSpin	Boolean	Used to disable the spin button.	false
buttonText	String	Sets the text in the button	"Spin"
hideButton	Boolean	Hides the button if true	false
startAngle	Number	Set the degrees to which the wheel is initially rotated.	0
canvasWidth	Number	Set the width of the canvas element. (Defaults to 500)	500
canvasHeight	Number	Set the height of the canvas element. (Defaults to 500)	500

Available Events

Event	Returned Value	Description
spin-start	null	The function governing the spinning of the wheel has started
spin-stop	value from options array corresponding to where the wheel stopped. Note: the value will be the top level value from the options array by index. I.e. if it's an object with text and color values this return that object.	The function governing the spinning of the wheel has stopped

Color Options

Fonts

You have a few options to set color values for slices and fonts in the wheel. All fonts default to the css value black and can be overidden as follows.

Slices

Slices will first look for a fontColor value in the corresponding options object, then the color value in the slicesFont prop, and then fall back to black.

Hub

The hub (center of the wheel) will first look for a color value in the hubFont prop.

• If no color value is present it will defaul to black.
• If the color value is set to use-slice and a value is set in the color value of the slicesFont prop it will use the slicesFont.color value.
• If the color value is set to use-option it will look for a fontColor value in the option object that corresponds to the slice the wheel landed on. If no fontColor exists in the landed on option it will use the slicesFont.color value. If no slicesFont.color value exists it will fall back to black.