# vue-winwheel-reversion

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

Latest version **1.2.1** (published 2021-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-winwheel-reversion
pnpm add vue-winwheel-reversion
yarn add vue-winwheel-reversion
bun add vue-winwheel-reversion
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2021-09-28 |
| First published | 2021-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 121.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | maz |
| Maintainers | mazfreelance |
| Keywords | vue, vue-winwheel, vue winwheel, vue roulette, vue lucky spin |

## Links

- npm: https://www.npmjs.com/package/vue-winwheel-reversion
- Repository: https://github.com/mazfreelance/vue-winwheel
- Homepage: https://github.com/mazfreelance/vue-winwheel#readme
- Issues: https://github.com/mazfreelance/vue-winwheel/issues
- npm.io page: https://npm.io/package/vue-winwheel-reversion

## Dependencies (1)

- [gsap](https://npm.io/package/gsap.md) ^3.7.1

## Recent versions

- 1.2.1 (latest) — 2021-09-28
- 1.2.0 — 2021-09-28
- 1.1.3 — 2021-06-23
- 1.1.2 — 2021-06-18
- 1.1.1 — 2021-06-18

## README

# 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
```shell
git clone git@github.com:mazfreelance/vue-winwheel.git
```

Go to the demo folder
```shell
/vue-winwheel/demo
```

Then install dependencies
```shell
npm install
```

And run the project
```shell
npm run serve
```


# Installation

## npm

```shell
$ npm install vue-winwheel-reversion --save
```

# Usage

## Basic

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

```html
<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](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/vue-winwheel-reversion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._