1.3.2 • Published 3 years ago
vue-raffle-wheel v1.3.2
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
colorvalue is present it will defaul toblack. - If the
colorvalue is set touse-sliceand a value is set in thecolorvalue of theslicesFontprop it will use theslicesFont.colorvalue. - If the
colorvalue is set touse-optionit will look for afontColorvalue in the option object that corresponds to the slice the wheel landed on. If nofontColorexists in the landed on option it will use theslicesFont.colorvalue. If noslicesFont.colorvalue exists it will fall back toblack.