vue-winwheel

a winwheel for vuejs based on http://dougtesting.net/home

fork on: https://github.com/rebotak/vue-winwheel

published on: https://www.npmjs.com/package/vue-winwheel

Demo

Download this repository

 git clone [email protected]:mazfreelance/vue-winwheel.git

Go to the demo folder

 /vue-winwheel/demo

Then install dependencies

 npm install

And run the project

 npm run serve

Installation

npm

 $ npm install vue-winwheel-reversion --save

Usage

Basic

   <vue-winwheel
    :segments="options"
	:wheelSize="wheelSize"
	:pageTitle="pageTitle"
	:lineWidth="lineWidth"
	:btnColor="btnColor"
	:btnText="btnText"
	:spin="spin"
	:duration="duration"
  />

 <script>
import VueWinwheel from 'vue-winwheel-reversion/vue-winwheel'

export default {
  components:{
    VueWinwheel
  },
  data(){
    return{
	  pageTitle       : "Vue-Wheel",
      wheelSize       : 400,
      btnColor        : "",
      btnText         : "",
      lineWidth       : 3,
      duration        : 5,
      spin       	  : 5,
      options:[
					{
						textFillStyle: '#fff',
						fillStyle: '#000',
						text:'Prize 1'
					},
					{
						textFillStyle: '#000',
						fillStyle: '#fadede',
						text:'Prize 2'
					},
					{
						textFillStyle: '#fff',
						fillStyle: '#000',
						text:'Prize 3'
					},
					{
						textFillStyle: '#000',
						fillStyle: '#fadede',
						text:'Prize 4'
					},
					{
						textFillStyle: '#fff',
						fillStyle: '#000',
						text:'Prize 5'
					},
					{
						textFillStyle: '#000',
						fillStyle: '#fadede',
						text:'Prize 6'
					},
					{
						textFillStyle: '#fff',
						fillStyle: '#000',
						text:'Prize 7'
					},
					{
						textFillStyle: '#000',
						fillStyle: '#fadede',
						text:'Prize 8'
					}
				]
    }
  }
}
</script>

License

The MIT License