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
Download this repository
git clone git@github.com:mazfreelance/vue-winwheel.git
Go to the demo folder
/vue-winwheel/demo
Then install dependencies
npm install
And run the project
npm run serve
$ npm install vue-winwheel-reversion --save
<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>